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近年 来 ， 移 动 互联 网 、 大 数据 、 云 计算 、 物 联网 、 虚 拟 现实 、 机 器 人 、 无 人 驾驶 、 智 
能 制造 等 新 兴 产 业 发 展 迅 速 ， 但 国内 人 才 培 养 却 相对 滞后 ， 存 在 “基础 人 才 多 、 骨 干 人 才 
缺 、 战 略 人 才 稀 ， 人 才 结 构 不 均衡 ”的 突出 问题 ， 严 重 制约 着 我 国 战略 新 兴 产业 的 快速 发 
展 。 同 时 ,“ 重 使 用 、 轻 培养 ”的 人 才 观 依然 存在 ， 可 持续 性 培养 机 制 缺乏 。 因 此 ， 建 立 
战略 新 兴 产 业 人 才 培 养 体系 ， 形 成 可 持续 发 展 的 人 才 生 态 环境 刻不容缓 。 

中 关 村 作为 我 国 高 科技 产业 中 心 、 战 略 新 兴 产 业 的 策 源 地 、 创 新 创业 的 高 地 ， 对 全 国 
的 战略 新 兴 产 业 、 创新 创业 的 发 展 起 着 引领 和 示范 作用 。 基 于 此 , 作者 所 负责 的 新 迈 尔 ( 北 
京 ) 科技 有 限 公司 依托 中 关 村 优质 资源 ， 聚 集 高 新 技术 企业 的 技术 总 监 、 架 构 师 、 资 深 工 
程 师 ， 共 同 开发 了 面向 行业 紧缺 岗位 的 系列 丛书， 希望 能 缓解 战略 新 兴 产 业 需 要 快速 发 展 
与 行业 技术 人 才 匮 乏 之 间 的 矛盾 ， 能 改变 企业 需要 专业 技术 人 才 与 高 校 毕 业 生 的 技术 水 平 
不 足 之 间 的 矛盾 。 

优秀 的 职业 教育 本 质 上 是 一 种 更 直接 面向 企业 、 服 务 产业 、 促 进 就 业 的 教育 ， 是 高 等 
教育 体系 中 与 社会 发 展 联系 最 密切 的 部 分 。 而 职业 教育 的 核心 是 “ 教 ”““ 学 ”“ 习 ”的 有 机 
融合 、 互 相 了 驱动 ， 要 做 好 “ 教 ” 必 须要 有 优质 的 课程 和 师资 ， 要 做 好 “学 ”必须 要 有 先进 
的 教学 和 学 生 管 理 模式 ， 要 做 好 “ 习 ” 必 须要 以 案例 为 核心 、 注 重 实践 和 实习 。 新 迈 尔 ( 北 
京 ) 科技 有 限 公司 通 过 对 当前 国内 高 等 教育 现状 的 研究 , 结合 国内 外 先进 的 教育 教学 理念 ， 
形成 了 科学 的 教育 产品 设计 理念 、 标 准 化 的 产品 研发 方法 、 先 进 的 教学 模式 和 系统 性 的 学 
生 管理 体系 ， 在 我 国 职业 教育 正在 迅速 发 展 、 教 育 改革 日 益 深入 的 今天 ， 新 迈 尔 〈 北 京 ) 
科技 有 限 公司 将 不 断 沉 淀 和 推广 先进 的 、 行 之 有 效 的 人 才 培 养 经 验 ， 以 推动 整个 职业 教育 
的 改革 向 纵深 发 展 。 

通过 大 量 企 业 调 研 ， 目 前 ULUE 交互 设计 师 岗位 面临 着 人 才 供不应求 的 局 面 ， 与 过 去 
相 比 ， 企 业 对 于 UVUE 设计 师 的 要 求 在 不 断 提高 ， 过 去 的 平面 设计 师 已 经 很 难 满 足 企业 要 
求 ， 本 系列 教材 覆盖 平面 设计 、 创 意 设 计 、 移 动 UI 设计 、 网 站 设计 、 交 互 设计 、Web 前 
端 开发 等 模块 ， 教 学 和 学 习 目标 是 让 学 习 者 能 够 胜任 UI 交互 设计 师 岗 位 ， 不 仅 会 熟练 使 
用 设计 软件 进行 平面 、 移 动 APP 和 网 站 设计 ,还 能 够 根据 不 同行 业 、 产 品 和 用 户 进行 创意 
设计 ， 能 够 更 加 注重 所 设计 产品 的 商业 价值 和 用 户 体验 。 

任务 导向 、 案 例 教 学 、 注 重 实战 经 验 传递 和 创意 训练 是 本 系列 从 书 的 显著 特点 ， 改 变 
了 先 教 知识 后 学 应 用 的 传统 学 习 模式 ， 根 治 了 初学 者 对 技术 类 课程 感到 枯燥 和 茫然 的 学 习 
心态 ， 激 发 学 习 者 的 学 习 兴 趣 ， 打 造 学 习 的 成 就 感 ， 建 立 对 所 学 知识 和 技能 的 信心 ， 是 对 
传统 学 习 模 式 的 一 次 改进 。 

UIUE 交互 设计 系列 从 书 具 有 以 下 特点 : 
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以 就 业 为 导向 :根据 企业 岗位 需求 组 织 教学 内 容 ， 就 业 目 的 非常 明确 。 
以 实用 技能 为 核心 ， 以 企业 实战 技术 为 核心 ， 确 保 技能 的 实用 性 。 
。 以 案例 为 主线 ， 从 实例 出 发 ， 采 用 任务 驱动 教学 模式 ， 便 于 掌握 ， 提 升 兴趣 ， 本 质 上 
| 提高 学 习 效果 。 
”以 动手 能 力 为 合格 目标 : 注重 培养 实践 能 力 ， 以 是 否 能 够 独立 完成 真实 项 目 为 检验 学 
区 习 效果 的 标准 。 
| 以 项 目 经 验 为 教学 目标 : 以 大 量 真实 案例 为 教 与 学 的 主要 内 容 , 完成 本 课程 的 学 习 后 ， 
| 相当 于 在 企业 完成 了 上 百 个 真实 的 项 目 。 
| ”信息 技术 的 快速 发 展 正在 不 断 改变 人 们 的 生活 方式 ， 新 远 尔 〈 北 京 ) 科技 有 限 公司 也 
| 希望 通过 我 们 全 体 同仁 和 您 的 共同 努力 ， 让 您 真正 掌握 实用 技术 、 让 您 变 成 复合 型 人 才 、 
让 您 能 够 实现 高 薪 就 业 和 技术 改变 命运 的 梦想 ， 在 助 您 成 功 的 道路 上 让 我 们 一 路 同行 。 
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第 7 章 
初 识 HTML 与 CSS 


本 到 

在 网 络 时 代 的 主流 下 ， 各 种 信息 的 获得 途径 ， 不 论 是 PC 端 ， 还 是 移动 端 ， 基 本 上 
都 是 以 Web 页 面 为 基础 来 呈现 的 ,因此 Web 页 面 呈 现 信息 已 成 为 各 种 信息 共享 的 主要 形 
式 。 而 HIML ( Hyper Text Markup Language， 超 文本 置 标语 言 ) 则 是 创建 Web 页 面 的 基 
础 。 本 书 将 从 HIML 文件 的 基本 结构 、 语 法 来 展开 ， 然 后 介绍 使 用 HTML 标签 制作 简单 
的 网 页 ， 最 后 使 用 DIV+CSS 制作 精美 的 商业 网 站 。 

本 章 将 讲解 HIML 的 基础 内 容 ， 给 大 家 打下 一 个 牢固 的 基础 ， 即 本 章 的 重点 内 容 是 
HTML 文件 的 基本 结构 和 W3C 标准 ， 以 及 制作 网 页 时 常用 的 基本 标签 。 


工作 人 人 


> 学 习 HTML 和 CSS 
> ”制作 简单 的 网 页 





> 掌握 HTML 的 基本 概念 
> 掌握 HTML 的 基本 语法 和 结构 


| 背诵 英文 单词 


请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 ,了解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
head 
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title 
body. 
strong 








target 
href 


| | 预习 并 回答 以 下 问题 


1. 什么 是 W3C 标准 ? 为 什么 要 遵循 这 一 标准 ? 
2. 制作 网 页 用 到 的 基本 标签 有 哪些 ? 它们 的 作用 是 什么 ? 
3. 如 何在 网 页 中 插入 一 张 图 片 ， 并 且 当 鼠标 移 至 图 片上 时 出 现 图 片 说 明文 字 ? 














1.1 HTML 基本 概念 


互联 网 上 的 信息 是 以 网 页 的 形式 呈现 给 用 户 的 ， 因 此 ， 网 页 是 网 络 信息 传递 的 载体 。 

网 页 文件 是 用 一 种 标签 语言 书写 的 ， 这 种 语言 称 为 HTML (Heyper Text Markup 
Language， 超 文本 标记 语言 );， 是 用 来 描述 网 页 文档 的 一 种 置 标 语言 。HTML 文件 以 .htm 
或 .html 为 扩展 名 。 
| 1.1.1 什么 是 HTML 
| HTML 不 是 一 种 编程 语言 ， 而 是 一 种 描述 性 的 标记 语言 (Markup Language)， 用 于 描 
| 述 网 页 的 内 容 和 结构 。HITML 最 基本 的 语法 是 : 

标签 页 面 呈 现 的 内 容 标签 
| 标签 通常 是 成 对 出 现 ， 有 一 个 开始 标签 就 对 应 有 一 个 结束 标签 。 结 束 标 签 只 是 在 开始 
| 标签 的 前 面 加 一 个 斜 本 “/”。 当 浏览 器 收 到 HIML 文件 后 ， 就 会 解释 里 面 的 标签 ， 然 后 把 
| 标签 相对 应 的 功能 表达 出 来 ， 从 而 显示 浏览 网 页 的 内 容 。 
| 例如 ， 在 HTML 中 ， 用 <h1></hl> 标 签 来 定义 一 个 文章 的 标题 ， 用 <br/> 标 签 来 定义 一 个 
换行 符 。 当 浏览 器 遇 到 <hl>xxx</h1> 标 签 时 ， 会 把 该 标签 中 的 内 容 (xxx) 自动 形成 一 个 标题 。 
当 遇 到 <br 人 标签 时 会 自动 换行 , 标签 中 的 “/” 可 以 省 略 , 但 为 了 代码 的 规范 性 , 一 般 建 议 加 上 。 
| 1.1.2 ”HTML 的 发 展 历程 

HTML 主要 用 于 描述 超 文本 中 内 容 的 显示 方式 。 标 记 语言 从 诞生 到 今天 ,经历 了 二 十 
几 年 的 不 断 更 新 与 改进 ， 已 经 越 来 越 完善 ， 经 历 的 版 本 及 发 布 日 期 如 表 1.1 所 示 。 
表 1.1 HTML 发 展 史 

版 ”本 发 布 日 其 说 了 明 


文本 标记 语言 
1993 年 6 月 作为 互联 网 工程 工作 小 组 (IETF) 的 工作 草案 发 布 (并 非 标准 ) 
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版 本 发 布 日 期 说 明 
2 1995 年 11 月 作为 Us 发 布 ， 在 RFC2854 于 2000 年 6 月 发 布 之 后 被 
HE 宣布 已 过 时 
HIML3.2 1997 年 1 月 14 日 | W3C 推荐 标准 
HIML4.0 1997 年 12 月 18 日 | W3C 推荐 标准 
HIML4.01 1999 年 12 月 24 日 | 微小 改进 ，W3C 推荐 标准 
i 2060 年 5 月 15 目 基于 严格 的 HIML4.0 语法 ， 是 国际 标准 化 组 织 和 国际 电工 委 


员 会 的 标准 
W3C 推荐 标准 ， 后 来 经 过 修订 ， 于 2002 年 8 月 1 日 重新 发 布 
较 XHTML1.0 有 微小 改进 

2009 年 ，W3C 停止 了 XHTML2.0 工作 组 的 工作 

W3C 正式 宣布 凝结 了 大 量 网 络 工作 者 心血 的 HIML5 规范 正式 










XHTMLI1.0 2000 年 1 月 26 日 
XHTML1.1 2001 年 5 月 31 日 
XHIML2.0 草案 | 没有 发 布 














HIML5S 2014 年 12 月 28 日 





1.1.3 HTML 与 XHTML 的 重要 区 别 


通过 HTML 的 发 展 历史 ， 可 以 知道 这 套 语言 有 两 个 版 本 ， 即 XHTML 和 HTML。 昌 | 
然 目前 浏览 器 都 兼容 HTML， 但 是 为 了 使 网 页 能 够 符合 标准 ， 应 该 尽量 使 用 XHTML 规范 | 
来 编写 代码 ， 需 要 注意 的 事项 有 : | 
(1) 在 XHTML 中 , 标签 名 必须 小 写 。 在 HTML 中 , 标签 名 称 可 以 大 写 ,也 可 以 小 写 。 | 
(2) 在 XHTML 中 ， 属 性 名 称 必须 小 写 。 在 HTML 中 ， 属 性 名 称 不 区 分 大 小 写 。 | 
(3) 在 XHTML 中 , 标签 必须 严格 嵌 套 。 在 HTML 中 , 对 标签 的 堪 套 没有 严格 的 规定 。 | 
(4) 在 XHTML 中 ， 标 签 必须 封闭 。 在 HTML 中， 标签 不 封闭 也 是 正确 的 ， 即 标签 | 
可 以 不 成 对 出 现 。 例 如 ,，“<p> 我 没有 结束 标记 ”和 “<p> 我 有 开始 标记 和 结束 标记 <p>”， | 
在 浏览 器 中 显示 的 结果 是 完全 相同 的 ; 但 是 , 在 XHTML 中 , 第 一 条 语句 是 不 被 允许 的 (不 | 
E 正 常 显示 )， 必 须 像 第 二 条 语句 那样 ， 严 格 地 使 标签 封闭 。 
(5) 在 XHTML 中 ， 即 使 是 空 元 素 的 标签 也 必须 封闭 。 这 里 说 的 空 标签 ， 就 是 指 那 | 
些 像 <img><br><hr> 等 不 对 称 的 标签 ， 它 们 也 必须 闭合 ,在 HTML 中 ,这 类 标签 书写 为 | 
<img> 或 <img 人 > 均 是 正确 的 ， 但 在 XHTML 规范 中 ， 必 须 写 为 <img /> 才 正 确 。 | 
(6) 在 XHTML 中 ， 属 性 值 必须 使 用 双 引号 引起 来 。 在 HTML 中 ， 属 性 值 可 以 不 必 | 
使 用 双 引号 。 
(7) 在 XHTML 中 ， 属 性 值 必须 使 用 完整 形式 。 在 HTML 中 ， 一 些 属性 经 常 使 用 简 | 
写 方式 设 定 属性 值 ， 如 <input disabled>; 而 在 XHTML 中 ， 必 须 完整 地 写 为 <input 
disabled="disabled"/>。 | 


1.1.4 ” HTML 文件 基本 结构 


完整 的 HTML 结构 包括 头 部 、 主 体 等 ， 页 面 的 各 部 分 内 容 都 在 对 应 的 标签 中 。 
一 个 HIML 文件 的 基本 结构 如 示例 1.1 所 示 。 
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示例 1.1: 
<!DOCTYPE html> <!-- 文 档 类 型 说 明 --> 
<html lang="en"> <!-- 文 件 开始 标签 -> 
<head> <!-- 文 档 头 部 开始 标签 -> 
<meta charset="UTF-8"> <!-- 字 符 集 -> 
<title>Title</title> <!-- 文 档 的 头 部 --> 
</head> <!-- 文 档 头 部 结束 标签 -> 
<body> <!-- 文 档 的 主体 -> 
</body> <!-- 主 体 结束 标签 --> 
</html> <!-- 文 件 结束 标签 --> 





| 1. DOCTYPE 声明 

| DOCTYPE 是 用 来 声明 文档 类 型 的 ， 声 明文 档 为 HTML 文档 结构 ， 用 来 检验 是 否 符合 
| Web 相关 标准 ， 同 时 告诉 浏览 器 使 用 哪 种 规范 来 解释 这 个 文档 中 的 代码 。DOCTYPE 声明 
| 必须 位 于 HTML 文档 的 第 一 行 。 

2. <html> 标 签 

<html> 标 签 是 HTML 语言 中 最 基本 的 单位 ,一 个 网 页 以 <html> 标 签 开始 、 以 </html> 





| 
| 标签 结束 。 


| 3. <head> 标 签 


| <head> 标 签 用 于 定义 文档 的 头 部 ， 是 所 有 头 部 元 素 的 容器 。<head> 标 签 中 的 元 素 可 以 
引用 脚本 ， 指 示 浏览 器 在 哪里 找到 样式 表 ， 提 供 元 信息 等 。 文 档 的 头 部 描述 了 文档 的 各 种 
| 属性 和 信息 ， 绝 大 多 数 文档 头 部 包含 的 数据 都 不 会 真正 作为 内 容 显 示 给 用 户 。 
4. <title> 标 签 
<title> 标 签 描述 网 页 的 标题 ， 类 似 一 篇 文章 的 标题 ， 一 般 为 一 个 简洁 的 主题 ， 并 能 吸 
引 读者 有 兴趣 读 下 去 ， 例 如 ， 百 度 首页 ， 对 应 的 网 页 标题 为 : 
<title> 百 度 一 下 ， 你 就 知道 </title> 


在 浏览 器 中 的 效果 如 图 1.1 所 示 。 











图 1.1 <title> 标 签 的 使 用 





5. <meta> 标 签 


<meta> 标 签 描述 网 页 具体 的 摘要 信息 ， 包 括 文档 内 容 类 型 、 字 符 编码 信息 、 搜 索 关键 


。 4。 
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字 、 网 站 提供 的 功能 和 服务 的 详细 描述 等 。<meta> 标 签 描述 的 内 容 并 不 显示 ， 其 目的 
便 浏 览 器 解析 或 利于 搜索 引擎 搜索 ， 采 用 “名 称 / 值 ”对 的 方式 描述 摘要 信息 。 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | y 
其 中 ， 属 性 “http-equiv” 提 供 “ 名 称 / 值 ”中 的 名 称 ，“content” 提 供 “ 名 称 / 值 ”中 的 天 内 
值 ，HTML 代码 的 含义 如 下 。 Note 
加 ”名 称 : content-type (文档 内 容 类 型 )。 ot 
加 ” 值 : text/html。 | 
charset=UTF-8 (html 文档 的 字符 编码 为 国际 标准 字符 )，charset 表示 字符 集 编码 。 常 ， 
用 的 编码 有 以 下 几 种 。 | 
GB2312: 简体 中 文 ， 一 般 用 于 包含 中 文 和 英文 的 页 面 。 
ISO-885901: 纯 英文 ， 一 般 用 于 只 包含 英文 的 页 面 。 
BIG5: 繁体 ， 一 般 用 于 带 有 繁体 字 的 页 面 。 | 
UTF-8: 国际 通用 的 字符 编码 ， 同 样 适用 于 中 文 和 英文 的 页 面 。 与 GB2312 编码 相 比 ，| 
国际 通用 性 更 好 ， 但 字符 编码 的 压缩 比较 低 ， 对 网 页 性 能 有 一 定 的 影响 。 | 
当 网 页 打开 后 出 现 乱 码 的 原因 就 是 没有 设置 <meta> 标 签 、 字 符 编码 造成 的 ， 从 这 里 可 | 
以 看 到 ， 一 个 网 页 的 字符 编码 是 多 么 重要 ， 因 此 在 制作 网 页 时 ， 一 定 不 要 忘记 设置 网 页 编 | 
码 ， 以 免 出 现 页 面 乱 码 问 题 。 | 
6. <body> 标 签 


<body> 标 签 是 用 在 网 页 中 的 一 种 HTML 标签 ， 表 示 网 页 的 主体 部 分 ， 也 就 是 用 户 可 
以 看 到 的 内 容 ， 可 以 包含 文本 、 图 片 、 音 频 、 视 频 等 各 种 内 容 。 | 


方 | 



































1.2 W3C 标准 


发 明 HTML 的 初衷 是 为 了 实现 信息 资料 的 网 络 传播 和 共享 ， 希 望 HTML 文档 具有 平 | 
台 无 关 性 。 即 同一 HTML 文档 , 在 不 同 的 系统 、 不 同 的 浏览 器 上 看 到 同样 的 页 面 内 容 和 效 ， 
果 ， 但 遗憾 的 是 ， 随 着 浏览 器 市 场 的 激烈 竞争 ， 各 大 浏览 器 厂商 为 了 吸引 用 户 ， 都 在 早期 
HTML 版 本 的 基础 上 扩展 了 各 类 标签 ， 导 致 HTML 编码 规则 混乱 ， 各 浏览 器 之 间 互 不 兼 ， 
容 , 违 彰 了 HTML 发 明 的 初衷， 在 这 样 的 背景 下 ,，W3C (World Wide Web Consortium, 万 
维 网 联盟 ) 诞生 了 ， 由 该 组 织 来 制定 和 维护 统一 的 国际 化 Web 开发 标准 ， 确 保 多 个 浏览 | 
器 都 兼容 ， 因 此 由 W3C 组 织 制定 和 维护 的 Web 开发 标准 ， 也 称 为 W3C 标准 。 




















1.3 CSS 的 基本 概念 


1.3.1 什么 是 CSS | 
CSS (Cascading Style Sheet， 层 县 样式 表 ) 是 一 组 格式 设置 规则 ， 用 于 控制 Web | 


“5. 








| 器 模块 可 能 已 经 有 标准 了 ， 而 像 grad 布局 可 能 还 处 在 一 个 起 草 阶段 ， 所 以 说 CSS3 的 全 
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页 面 的 外 观 。 
通过 使 用 CSS 样式 设置 页 面 的 格式 ， 可 将 页 面 的 内 容 与 表现 形式 分 开 。 


1.3.2 CSS 的 发 展 史 


CSS 最 早 于 1996 年 由 W3C 审核 通过 并 推荐 使 用 ， 被 称 为 CSS1，CSS1 比较 全 面 地 规 
定 了 文档 的 显示 样式 ， 主 要 包括 选择 器 、 以 及 一 些 基 本 的 样式 。1998 年 ，W3C 推出 了 
CSS2，CSS2 在 CSS1 的 基础 上 添加 了 新 的 选择 器 ， 改 进 了 位 置 属性 以 及 添加 了 新 的 媒体 
类 型 等 。 在 实现 CSS2 标准 时 花费 了 很 长 时 间 ， 遇 到 了 很 多 的 问题 ， 于 是 ，2007 年 W3C 
对 CSS2 进行 了 修订 、 修改 , 同时 又 删除 了 一 些 属性 和 样式 , 推出 了 CSS2.1。2001 年 W3C 
开始 着 手 CSS3 标准 的 制定 , 与 前 面 的 版 本 不 一 样 ，CSS3 不 是 一 个 独立 的 完整 版 本 ,而 是 
拆 分 成 了 若干 个 独立 的 模块 ， 如 选择 器 模块 和 盒 模型 模块 等 ， 这 些 拆 分 有 利于 整个 标准 的 
及 时 更 新 和 发 布 ， 也 有 利于 浏览 器 厂商 的 实现 。 然 而 每 个 模块 的 进度 都 不 一 样 ， 比 如 选择 


















































| 支持 与 推广 还 需要 很 长 一 段 时 间 。 但 现在 一 些 主流 浏览 器 已 经 开始 支持 CSS3 的 部 分 属性 
| 了 ， 开 发 者 在 开发 中 也 已 经 用 到 这 些 属性 ， 特 别 是 在 移动 端的 开发 中 ， 像 页 面 中 的 动画 、 
| 圆 角 等 效果 ， 基 本 上 都 是 用 CSS3 的 属性 来 做 的 。 





1.3.3 HTML 和 CSS 的 优 缺 点 


(1) HTML 主要 有 3 个 缺点 ， 如 下 所 示 。 

回 HIML 代码 不 规范 ， 腑 肿 ， 需 要 足够 智能 和 庞大 的 浏览 器 才能 够 正确 显示 页 面 。 
加 ”数据 与 表现 混杂 ， 当 页 面 要 改变 显示 时 ， 就 必须 重新 制作 HTML。 

加 ”不 利于 搜索 引擎 搜索 。 

(2) HTML 有 两 个 显著 的 优点 ， 如 下 所 示 。 

回 ”使 用 Table 的 表现 方式 不 需要 考虑 浏览 器 兼容 问题 。 

回 ”简单 易学 ， 易 于 推广 。 

(3) CSS 的 优点 产生 恰好 弥补 了 HMTL 的 缺点 ， 主 要 表现 在 以 下 几 个 方面 。 

回 “ 表现 与 css 的 结构 分 离 。 

CSS2 从 真正 意义 上 实现 了 设计 代码 与 内 容 的 分 离 ， 它 将 设计 部 分 剥离 出 来 并 放 在 一 


个 独立 的 样式 文件 中 ，HIML 文件 中 只 存放 文本 信息 ， 这 样 的 页 面 对 搜 索引 擎 更 加 友好 。 


回 ”提高 页 面 浏览 速度 。 
对 于 一 个 页 面 视觉 效果 ， 采 用 CSS 布局 的 页 面容 量 要 比 Table 编码 的 页 面 文件 容量 








小 得 多 ， 前 者 一 般 只 有 后 者 的 12， 浏 览 器 不 用 去 编译 大 量 元 长 的 标签 。 


回 ”易于 维护 和 改版 。 

开发 者 只 要 简单 修改 几 个 CSS 文件 ， 就 可 以 重新 设计 整个 网 站 的 页 面 。 

加” 继承 性 能 优越 ( 层 倒 处理)。 

CSS 代码 在 浏览 器 的 解析 顺序 上 会 根据 CSS 的 级 别 进行 , 它 按照 对 同一 元 素 定义 的 先 





| 后 来 应 用 多 个 样式 , 良好 的 CSS 代码 设计 可 以 使 代码 之 间 产 生 继承 关系 , 能 够 达到 最 大 限 
| 度 的 代码 重用 ， 从 而 降低 代码 量 及 维护 成 本 。 





。6。 
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党 
回 易于 被 搜索 引擎 搜索 。 
由 于 CSS 代码 规范 整齐 ， 且 与 网 页 内 容 分 离 ， 所 以 引擎 搜索 时 仅 分 析 内 容 部 分 即 可 。 | 
(4) CSS 主要 缺点 在 于 需要 考虑 浏览 器 兼容 性 的 问题 。 | 


1.4 网 页 的 开发 环境 


1.4.1 记事 本 开发 环境 


单 击 Windows 任务 栏 上 的 “开始 ”按钮 ， 选 择 “ 所 有 程序 ”一 “附件 ”一 “记事 本 ”| 
命令 ， 打 开 记 事 本 程序 ， 如 图 1.2 所 示 。 
在 记事 本 程序 中 输入 相关 的 HTML 和 CSS 代码 ， 然 后 将 记事 本 文件 以 扩展 名 为 html | 
或 htm 进行 保存 ， 并 在 浏览 器 中 打开 文档 以 查看 效果 。 





图 1.2 记事 本 开发 环境 
1.4.2 ”Dreamweaver CS6 开发 环境 


使 用 记事 本 可 以 编写 HTML 文件 , 但 是 编写 效率 太 低 , 对 于 语法 错误 及 格式 都 没有 提 
示 , 而 很 多 专门 制作 网 页 的 工具 则 弥补 了 这 种 缺陷 。 其中, Adobe 公司 的 Dreamweaver CS6 
用 户 界面 非常 友好 , 是 一 款 非 常 优秀 的 网 页 开发 工具 , 深 受 广 大 用 户 的 喜爱 。 Dreamweaver 
CS6 的 主 界面 如 图 1.3 所 示 。 






































图 1.3 Dreamweaver CS6 开发 环境 
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HTML 文件 的 基本 结构 包括 页 面 声明 、 页 面 基 本 信息 、 页 面 头 部 和 页 面 主体 等 。 


编写 HTML 文档 时 必须 遵守 W3C 标准 ，W3C 是 制定 和 维护 统一 的 
F 发 标准 的 组 织 。 

E 解 CSS 的 基本 概念 。 

用 Dreamweaver CS6、 记 事 本 程序 开发 网 页 。 


| 
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HTML 的 基本 标签 


本 章 简介 


本 章 主要 介绍 网 页 开发 过 程 中 用 到 的 标签 标签 是 开发 网 页 的 必 备 知识 ， 主 要 用 来 承 
载 网 页 内 容 。 就 好 像 是 要 把 一 桶 水 搬 到 饮水 机 上 ， 饮 水 机 就 是 网 页 中 的 标签 ， 水 桶 是 网 页 
的 内 容 。 然 而 标签 种 类 繁多 ， 开 发 网 页 时 要 针对 内 容 选 择 相对 应 的 标签， 这 就 是 语义 话 标 
签 。 在 开发 过 程 中 ， 不 同 的 内 容 选用 不 同 的 标签 ， 这 样 计算 机 才能 更 好 地 解析 网 页 


本 章 工作 任务 | 


> ”制作 摄影 作品 页 面 
> ”制作 网 页 导航 部 分 


本 章 技能 目标 | 





> 会 使 用 各 种 标签 描写 页 面 内 容 





| 背诵 英文 单词 


请 在 预习 时 找 出 下 列 HIML 标签 在 本 章 中 的 作用 和 用 法 ， 并 填写 于 横 线 处 。 








lmg 
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预习 并 回答 以 下 问题 
| 1 网 页 基本 标签 有 哪些 ? 它们 的 作用 是 什么 ? 


2. 网 页 中 怎么 插入 一 张 图 片 ? 图 片 标签 有 哪 几 种 常用 的 属性 ? 
3. 超 链接 的 概念 是 什么 ? 超 链接 的 基本 语法 是 什么 ? 超 链 接 有 哪些 分 类 ? 


21 标题 标签 





| 标题 标签 (Heading〉 也 岂 作 <h> 标 签 ， 包 括 <hl> <h2> <h3> <h4> <h5> <h6> 标 签 ， 
| 表示 一 段 文字 的 标题 或 主题 ， 其 中 <h1> 标 签 定义 最 大 的 标题 ，<h6> 标 签 定义 最 小 的 标题 。 
| <hl> 标 签 通常 用 于 网 站 的 标题 ，<h2><h3> 标 签 则 分 别 作为 大 分 类 列表 、 内 容 列表 等 层 层 
| 递 进 。 在 这 里 强调 一 点 ，<hl> 标 签 表示 一 段 文字 的 标题 或 主题 ， 所 以 不 宜 多 用 ， 一 个 就 足 
| 够 了 上， <h2> 一 <h6> 标 签 使 用 数目 不 限 ， 以 体现 多 层次 的 内 容 结构 。 例 如 ， 一 级 标题 采用 
| <hl>， 二 级 标题 则 采用 <h2>， 其 他 依 此 类 推 。HTML 共 提供 了 6 级 标题 <hl>~<h6>， 并 
| 赋予 了 标题 一 定 的 外 观 ， 所 有 标题 字体 加 粗 。 代 码 如 示例 2.1 所 示 。 


示例 2.1: 























<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 标 题 标签 </title> 
</head> 
<body> 
<hl> 我 是 一 级 标题 ， 我 最 大 </hl> 
<h2> 我 是 二 级 标题 </h2> 
<h3> 我 是 三 级 标题 </h3> 
<h4> 我 是 四 级 标题 </h4> 
<h5> 我 是 五 级 标题 </h5> 
<h6> 我 是 六 级 标题 ， 我 最 小 </h6> 
</body> 
</html> 


在 浏览 器 中 效果 如 图 2.1 所 示 。 
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标题 标签 xl | | 
我 是 一 级 标题 ， 我 最 大 
我 是 二 级 标题 | 
我 是 三 级 标题 Note 
我 是 四 级 标题 


我 是 五 级 标题 


我 是 六 级 标题 ， 我 最 小 


图 2.1 标题 标签 


2.2 分 段 显 示 网 页 段落 文本 (Paragraph ) 


使 用 段落 标签 =p> 可 以 分 段 显 示 网 页 中 的 文本 , 让 文章 具有 段落 之 分 。 合 理 使 用 段落 | 
<p> 让 文本 体现 出 段落 后 ， 不 仅 可 以 减轻 阅读 者 的 视觉 疲劳 ， 而 且 可 以 让 文章 更 有 条 理 ，| 
也 利于 搜索 引擎 优化 。 段 落 标签 是 双 标签 ， 即 <p></p>， 在 <p> 开 始 标签 和 </p> 结 束 标签 | 
之 间 的 内 容 形成 一 个 段落 ， 即 从 <p> 标 签 开始 ， 直 到 遇 到 下 一 个 段落 标签 之 前 的 文本 , 都 | 
在 一 个 段落 内 。 代 码 如 示例 2.2 所 示 。 

示例 2.2: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 段 落 标 标签 </title> 
</head> 
<body> 
<p>《 春 》 作者 : 朱自清 </p> 
<p> 盼 望 着 ， 盼 望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</p> | 
<p> 一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸红 起 ， 


Tel 
<p> 小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 时 里， 瞧 去 ， 一 大 片 一 大 片 满 | 

是 的 。 坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 提 几 回 迷 藏 。 风 轻 悄悄 的 ， 草 软 绵绵 的 。</p> 
<p> 桃 树 、 杏 树 、 梨 树 ， 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 赶 趟 儿 。 红 的 像 火 ， 粉 的 像 霞 ， 
白 的 像 雪 。 花 里 带 着 甜 味 儿 ; 闭 了 眼 ， 树 上 仿佛 已 经 满 是 桃 儿 、 桂 儿 、 梨 儿 。 花 下 成 干 成 百 的 蜜蜂 喻 喻 | 
地 六 着 ， 大 小 的 蝴蝶 飞 来 飞 去 。 野 花 遍地 是 ， 杂 样 儿 ， 有 名 字 的 ， 没 名 字 的 ， 散 在 草 从 里 ， 像 眼睛 , 像 
星星 ， 还 皮 呀 皮 的 …*… </p> | 
</body> 

</html> 


在 浏览 器 中 效果 如 图 2.2 所 示 。 
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3 @ Dfile//C/Users/www/Desktop/html+ se 
《 春 》 作者 : 朱自清 
盼望 着 ， 盼 望 着 ， 东 风 来 了 ， 春天 的 脚步 近 了 。 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 ， 山 朗 润 起 来 了 ， 水 涨 起 来 
了 ,太阳 的 脸红 起 来 了 。 





小 章 信 偷 地 从 士 里 钻 出 来 ， 媒 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 时 里 ， 瞧 去 ， 
一 大 片 一 大 片 满 是 的 。 坐 着 , 身 着 ， 打 两 个 滚 ， 踢 几 脚 球 , 赛 几 趟 殉 ， 
捉 几 回 迷 藏 。 风 轻 悄悄 的 ， 章 软 绵绵 的 。 


桃 树 、 杏 树 、 梨 树 ， 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 赶 趟 儿 。 红 的 像 
火 ， 阐 的 像 坊 ， 白 的 像 写 。 花 里 带 首 甜 味 儿 ， 闭 了 眼 ， 树 上 仿佛 已 经 满 
是 挑 几 、 查 儿 、 梨 儿 。 车 志 成 鸭 相遇 和 | Ec 
来 去。 野花 遍地 是 ， 杂 样 儿 ， 有 名 字 的 ， 没 名 字 的 ， 散 在 草丛 里， 
眼睛 ， 像 星星 ， 还 皮 评 且 呀 的 





图 2.2 段落 标签 显示 效果 


2.3 网 页 段落 文本 换行 ( Break ) 






使 用 换行 标签 可 以 将 网 页 段落 中 的 文本 换行 显示 ， 换 行 标签 <br/> 是 一 个 单 标签 ， 它 
没有 结束 标签 ， 是 英文 单词 break 的 缩写 ， 作 用 是 将 文字 在 一 个 段落 内 强制 换行 。 一 个 
<br/> 标 签 代表 一 个 换行 ,连续 的 多 个 <br/> 标 记 可 以 实现 多 次 换行 。 使 用 换行 标签 时 ,在 
需要 换行 的 位 置 添加 <br/> 标 签 即 可 。 代 码 如 示例 2.3 所 示 。 


示例 2.3: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 文 本 段 换 行 </title> 
</head> 
<body> 
你 见 ， 或 者 不 见 我 <br/> 
我 就 在 那里 <br/> 
不 悲 不 喜 <br/> 
<br> 
你 念 ， 或 者 不 念 我 <br/> 
情 就 在 那里 <br/> 
不 来 不 去 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.3 所 示 。 
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图 2.3 换行 标签 显示 效果 


2.4 为 网 页 添加 水 平 线 


在 网 页 的 排版 过 程 中 ， 如 果 添加 水 平 线 ， 可 以 让 网 页 内 容 有 条 理 的 显示 。 使 用 水 平 线 
标签 <hr /> 可 以 实现 为 网 页 添加 水 平 线 效果 。 代 码 如 示例 2.4 所 示 。 | 
示例 2.4: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 定 义 水 平 线 </title> 
</head> 
<body> 
<p> 定 义 水 平 线 </p> 
<hr/> 
<p> 床 前 明月 光 ， 疑 是 地 上 和 霜 。</p> 
<hr/> 
<p> 举 头 望 明月 ， 低 头 思 故 乡 。</p> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.4 所 示 。 
i | 


口 定义 水 平 线 X 





GD flle///C/Users/ www 三 | 
定义 水 平 线 | 





床 前 明月 光 ， 疑 是 地 上 霜 。 








举 头 望 明月 ， 低 头 思 放 乡 。 
图 2.4 水 平 线 标签 
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2.5 字体 样式 标签 


刁 闪 ”在 网 页 中 ， 针 对 不 同 的 内 容 可 能 需要 使 用 不 同 的 字体 样式 ， 如 重要 文本 通常 以 粗 体 显 
FG 示 ， 辅 助 内 容 可 能 以 斜体 显示 。HTML 中 的 <b> 标 签 将 文字 显示 为 粗 体 ，<em> 标 签 将 文字 
| 显示 为 斜体 ，<strong> 标 签 用 于 显示 需要 强调 的 文字 。 代 码 如 示例 2.5 所 示 。 
| 示例 2.5， 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<p><b> 粗 体 文字 的 显示 效果 哦 <b></p> 
| <p><em> 和 斜体 文字 的 显示 效果 </em></p> 
| <p><strong> 强 调 文字 的 显示 效果 哦 </strong></p> 
| </body> 
</html> 


| 在 浏览 器 中 的 效果 如 图 2.5 所 示 。 





DD 和 

€ 3 CC Dfiley///E:/ 孝 | 
粗 体 文字 的 显示 效果 哦 
请 作 艾 守 的 显示 用 村 


强调 文字 的 显示 效果 哦 





图 2.5 字体 样式 标签 


在 HIML 中 用 <sup> 标 签 实现 上 标 文字 ， 用 <sub> 标 签 实现 下 标 文 字 。<sup> 和 <sub> 
都 是 双 标 签 ， 放 在 开始 标签 和 结束 标签 之 间 的 文本 会 分 别 以 上 标 或 下 标 形式 出 现 。 代 码 如 
示例 2.6 所 示 。 


示例 2.6: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<tile> 上 下 标 文 </title> 
</head> 
<body> 
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<!-- 上 标 显示 --> 


<p>c=a<sup>2</sup>+b<sup>2</sup></p> 
<!-- 下 标 显示 --> 
<p>H<sub>2</sub>O</p> 


</body> | 4 
</html> | 医 靖 


在 浏览 器 中 的 效果 如 图 2.6 所 示 。 


D EF x 
€ C Dfiley///E:/ 教 Iy? 三 


c=a2+b2 


Hz0 








图 2.6 上 标 和 下 标 标签 
2.6 页 面 注释 标签 


注释 是 在 HTML 代码 中 插入 的 描述 性 文本 , 用 来 解释 该 代码 或 提示 其 他 信息 。 注释 只 | 
出 现在 代码 中 ， 浏 览 器 对 注释 代码 不 进行 解释 ， 在 浏览 器 的 页 面 中 也 不 显示 。 在 HIML | 
源 代码 中 适当 插入 注释 语句 是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 ， 
很 有 好 处 。 如 果 将 代码 交 给 其 他 设计 者 ， 其 他 人 也 能 很 快 读 慌 前 者 所 撰写 的 内 容 。 

注释 语法 如 下 : 

< -注释 内 容 - > 


注释 语句 由 两 部 分 组 成 ， 前 半 部 分 是 一 个 左 尖 括 号 、 一 个 半角 感叹 号 和 两 个 连 字 符 ， 
半 部 分 由 两 个 连 字符 和 一 个 右 尖 括 号 组 成 。 代 码 如 示例 2.7 所 示 。 


示例 2.7: 


刻 





<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 注 释 </title> 
</head> 
<body> 
<!- -这 里 是 标题- -> 
<h3> 网 页 设计 </h3> 
</body> 
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:VE 
GDfileV//E: 教 | 安 三 


网 页 设计 


图 2.7 页 面 注释 
页 面 注释 不 但 可 以 对 HTML 中 一 行 或 多 行 代 码 进行 解释 说 明 , 而 且 可 以 注释 掉 这 些 代 
| 码 。 如 果 希 望 某 些 HTML 代码 在 浏览 器 中 不 显示 ， 可 以 将 这 部 分 内 容 放 在 <!- -和 - -> 之 间 。 
| 例如 ， 修 改 上 述 代 码 ， 如 示例 2.8 所 示 。 
| 示例 2.8: 


<!DOCTYPE html> 
<html> 
| <head> 
! <meta charset="UTF-8"> 
| <tile> 注 释 </tile> 
</head> 
< 





<!- -<h3> 网 页 设计 </h3> - -> 
</body> 
</html> 


在 浏览 器 中 的 显示 效果 如 图 2.8 所 示 。 


图 2.8 内容 注释 


修改 后 的 代码 将 <h3> 标 签 作为 注释 内 容 处 理 了 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 
| 目前 ， 各 行 各 业 的 信息 都 出 现在 网 络 上 ， 而 每 个 行业 都 有 自己 的 行业 符号 ， 如 数学 、 
| 物理 和 化 学 都 有 特殊 的 符号 , 而 这 些 特殊 字符 往往 与 HTML 标签 存在 冲突 , 如 果 不 加 处 理 
就 会 导致 HTML 页 面 的 混乱 ， 浏 览 器 无 法 正确 识别 。 那 么 , 如 何在 网 页 中 添加 这 些 特殊 的 
| 字符 呢 ? 在 HIML 中 ， 特 殊 符号 以 & 开 头 ， 后 面 书写 相关 特殊 字符 ， 常 见 的 特殊 字符 如 
| 表 2.1 所 示 。 
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表 2.1 HTML 的 特殊 字符 
































显 示 说 明 HTML 编码 
半角 的 空格 &ensp; 
全 角 的 空格 Kemsp; 全 
不 断 行 的 空格 &nbsp; | 十 
< &lt; Note 
x &ot; | 
& RK&amp; | 
于 &quot; 
© Rcopy: 
TM 商标 (美国 ) &trade; 
x | times: 
divide: 
技能 训练 
上 机 练习 1 
制作 李 之 仪 的 词 《 卜 算 子 》 
需求 说 明 : 
使 用 学 过 的 标签 制作 李 之 仪 的 词 《 卜 算 子 》， 页 面 效果 如 图 2.9 所 示 。 
上 机 练习 2 
制作 李 之 仪 简介 
需求 说 明 : 


使 用 学 过 的 标签 制作 李 之 仪 的 简介 ， 标 题 使 用 标题 类 标签 ， 人 名 加 粗 显 示 ， 时 间 斜 体 
显示 ， 并 制作 页 面 版 权 部 分 ， 完 成 效果 如 图 2.10 所 示 。 





Eye 
二 


CD filey//C/Users/www/Desktop/html+css 教 材 / 身 19 三 


D 无 标 野 文档 六 


人 物 简介 
李 之 仪 人 人 。 字 端 投 ， 自 号 姑 溪 居士 / 姑 溪 老农 。 
沧州 无 棣 〈 庆 去 县 ) 人 。 站 入 下 人 和 国 扩 




















卜 算 子 ` 我 住 长 江 头 
。 他 
各 人 生生 加 和 相生 本， 信和 | 
此 水 恨 亲 时 已 。 “ 
NERO i 8@2016 新 迈 尔 科技 有 限 公司 
图 2.9 卜 算 子 图 2.10 人 物 简介 
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2.7 图 像 标签 和 超 链 接 标 签 


外 | ,71 网 页 中 的 图 像 


一 图 抵 千 言 ， 图 片 是 网 页 中 不 可 缺少 的 元 素 ， 会 使 网 页 更 加 生动 ， 可 以 描述 更 复杂 的 
| 问题 。 在 网 页 中 巧妙 地 使 用 图 片 ， 可 以 使 网 页 图 文 并 茂 ， 为 网 页 增色 不 少 。 网 页 支持 多 种 

| 图 片 格式 ， 并 且 可 以 对 插入 的 图 片 设置 宽度 和 高 度 。 

| 网 页 中 使 用 的 图 片 格式 可 是 GIF、JPEG、BMP、TIFF、PNG 等 ， 其 中 使 用 最 广泛 的 

是 JPEG、GIF 和 PNG 这 3 种 格式 。 它 们 的 相同 点 是 都 经 过 了 压缩 ， 压 缩 比 越 高 ， 图 像 品 

| 质 越 差 。 


2.7.2 图 像 标签 的 基本 语法 


图 像 标签 的 基本 语法 如 下 : 
<img src=" 图 片 地 址 " alt=" 图 像 的 蔡 代 文字 "title=" 鼠 标 悬 停 提 示 文 字 "” width=" 图 片 宽度 " height=" 图 
片 高 度 " 亡 
其 中 ,sre 属性 用 于 指定 图 片 源 文件 的 路 径 ， 是 <img> 标 签 必 不 可 少 的 属性 。alt 属性 指 
| 定 的 替代 文字 ， 表示 图 像 无 法 显示 时 《如 图 片 路 径 错 误 或 网 速 太 慢 等 ) 替代 显示 的 文本 ， 
| 这样， 即使 当 图 片 无 法 显示 时 ， 用 户 还 是 可 以 看 到 网 页 丢失 的 信息 内 容 ， 如 图 2.11 所 示 。 
































图 2.11 显示 效果 


| tine 属性 可 以 提供 额外 的 提示 或 帮助 信息 ， 当 鼠标 移 至 图 片上 时 显示 该 提示 信息 ， 方 
| 便 用 户 使 用 。 代 码 如 示例 2.9 所 示 。 


示例 2.9: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<img src="../pic/pic_11.jpg" title=" 北 京 施华洛 摄影 之 童真 系列 "/ 
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</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.12 所 示 。 
D 268~s | 全 


CD fleyVWE/ 教 村 /htmlrc 





Note 














图 2.12 title 属性 显示 效果 
2.7.3 设置 图 片 的 宽度 和 高 度 


在 HIML 文档 中 ,还 可 以 设置 插入 图 片 的 显示 大 小 , 一般 是 按 原 尺寸 来 显示 ， 但 也 可 
以 任意 设置 显示 尺寸 。 设 置 图 片 尺 寸 时 ， 分 别 用 属性 width 〈 宽 度 ) 和 height (高度)。 代 | 
码 如 示例 2.10 所 示 。 | 


示例 2.10: 


<! DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<img src="img/img-6.jpg"/> 
<img src="img/img-6.jpg" width="200"/> 
<img src="img/img-6.jpg" width="200" height="200"/> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.13 所 示 。 


一 re | 
DE Den Das x DK x x 


0 














图 2.13 设置 图 片 的 宽度 和 高 度 | 
如 图 2.13 所 示 , 左 图 是 图 片 的 原始 尺寸 ， 中 图 是 改变 宽度 的 尺寸 ， 右 图 是 改变 宽度 和 
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| 高 度 的 尺寸 


| 底部 对 齐 和 项 部 对 齐 。 代 码 如 示例 2.11 所 示 。 
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可 以 看 出 图 片 的 显示 尺寸 是 由 width (宽度 ) 和 height (高 度 ) 控制 的 。 当 只 为 图 片 设 





| 置 一 个 尺 十 属性 时 ， 另 外 一 个 尺 十 就 以 图 片 原始 的 长 宽 比 例 来 显示 。 图 片 的 尺寸 单位 可 以 
| 选择 百分比 或 数值 。 百 分 比 为 相对 尺寸 ， 数 值 是 绝对 尺寸 


| 2.7.4 排列 图 片 














在 网 页 的 文字 中 ， 如 果 插 入 图 片 ， 就 可 以 对 图 片 进行 排列 。 常 用 的 排列 方式 为 居中 、 








示例 2.11: 


<!IDOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 图 片 对 齐 </title> 
</head> 
<body> 
<h3> 未 设置 图 片 对 齐 方式 </h3> 
<p> 图 片 <img src="img-3.1.2/img/jimg-6.jpg"/> 在 文本 中 </p> 
<h2> 设 置 图 片 对 齐 方 式 </h2> 
<p> 图 片 和 <img src="img-3.1.2/img/img-6.jpg" algin="bottom"/> 文 字 底 部 对 齐 </p> 
<p> 图 片 和 <img src="img-3.1.2/img/img-6.jpg" align="middle"/> 文 字 居中 对 齐 </p> 
<p> 图 片 和 <img src="img-3.1.2/img/img-6.jpg" align="top"/> 文 字 顶 部 对 齐 </p> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.14 所 示 。 


D Em 到 D mHz 
CD fileVWEV 教 材 /html*css/ 辐 





未 设置 图 片 对 齐 方式 


有 中 


设置 图 片 对 齐 方式 


.RN 


图 2.14 图 片 的 排列 方式 
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示例 2.12: 
<IDOCTYPE html> | 
<html> | 
<head> | 食 憩 | 
<meta charset="UTF-8"> | 
<title> 无 标题 文档 </title> 
</head> | 
<body> | 


<p><img src="img/renwen.png"/> 
<img src="img/renwen-2.png"/><br/> 
西雅图 原生 态 公寓 室内 设计 和 Stadshem 小 户型 公寓 设计 </p> 
<p><img src="img/renwen-3.png"/> 
<img src="img/renwen-4.png"/><br/> 
西雅图 原生 态 公寓 室内 设计 和 Stadshem 小 户型 公寓 设计 </p> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 2.15 所 示 。 





-= 


西 蓝图 原生 态 公寓 室内 设计 和 Stedehe 实 设计 














图 2.15 ”<img> 标 签 综合 案例 
2.8 网 页 超 链 接 ( Anchor ) 


HTML 中 的 HH 就 是 Hypertext ( 超 文 本 ) 的 缩写 ， 超 文本 链接 语言 的 精 艇 就 是 链接 ， | 
通过 链接 才 可 以 把 世界 各 地 的 网 页 链接 到 一 起 成 为 互联 网 。 链 接 是 网 页 中 极为 重要 的 部 
分 ， 单 击 文档 中 的 链接 ， 即 可 跳 转 至 相应 的 位 置 。 正 是 因为 有 了 链接 ， 用 户 才 可 以 在 不 同 
的 网 页 中 来 回 跳 转 ， 从 而 方便 地 查阅 各 种 各 样 的 知识 ， 享 受 网 络 带 来 的 无 穷 乐 趣 。 


2.8.1 超 链接 的 概念 
通过 超 链接 浏览 不 同 的 网 页 就 是 从 一 个 文档 跳 转 到 另 一 个 文档 、 从 一 个 位 置 跳 转 到 另 | 
一 个 位 置 、 从 一 个 网 站 跳 转 到 另 一 个 网 站 的 过 程 ， 而 这 些 过 程 都 是 通过 链接 来 实现 的 。 


超 链接 包含 两 部 分 内 容 : 一 是 链接 地 址 ， 即 链接 的 目标 ， 可 以 是 某 个 网 址 或 文件 的 路 
径 ， 对 应 为 <a> 标 签 的 href 属性 ; 二 是 链接 文本 或 图 像 ， 单 击 该 文本 或 图 像 , 将 跳 转 到 href | 
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| 属性 指定 的 链接 地 址 ， 超 链接 的 基本 语法 如 下 : 











<a hre 合 "链接 地 址 " target=" 目 标 窗口 位 置 "> 链接 文本 或 图 像 </a> 

其 中 ,href 表示 链接 地 址 的 路 径 。target 指定 链接 在 哪个 窗口 打开 ， 常 用 的 取 值 有 _self 
(自身 窗口 ) 和 _blank (新 建 窗口 )。 

超 链 接 既 可 以 是 文本 超 链接 ， 也 可 以 是 图 像 超 链接 。 例 如 ， 示 例 2.13 中 两 个 链接 分 别 





| 表示 文本 超 链接 和 图 像 超 链接 ， 单 击 这 两 个 超 链接 均 能 在 一 个 新 的 窗口 中 打开 百度 页 面 。 
| 代码 如 示例 2.13 所 示 。 


示例 2.13: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 超 链接 </title> 
</head> 
<body> 
<a href="http://www.baidu.com" target=" blank"> 百 度 </a><br/> 
<a href="http://www.baidu.com" target="_blank"><img src="img/baidu.gif"/></a> 
</body> 
</html> 


在 浏览 器 中 打开 页 面 并 单 击 超 链接 ， 显 示 效 果 如 图 2.16 所 示 。 


“x DBRx Da De ss MN hn WH ns we sz 2 [2 
CD filey//E/ 通 村/htmlecss/ 家 例 /: 


一 0 
Bai 并 EE 度 Bai 人 百度 





图 2.16 超 链 接 属 性 


根据 链接 地 址 是 指向 站 外 文件 还 是 站 内 文件 ， 链 接地 址 又 分 为 绝对 路 径 和 相对 路 径 。 

回 ”绝对 路 径 : 指向 目标 地 址 的 完整 描述 ， 一 般 指 向 本 站 点 外 的 文件 。 例 如 

<a href ="http://www.sohu.com/index.html>" 搜 狐 </a> 

回 “ 相 对 路 径 ， 相 对 于 当前 页 面 的 路 径 ， 一 般 指向 本 站 点 内 的 文件 ， 所 以 一 般 不 需要 
完整 的 URL 地 址 的 形式 。 例 如 : 

<a hre 全 "login/login html"> 登 录 </a> 


表示 链接 地 址 为 当前 页 面 所 在 路 径 的 “login” 目 录 下 的 “login html” 页 面 。 假 定 当前 

















页 面 所 在 的 目录 为 “D:\root”, 则 链接 地 址 对 应 的 页 面 为 “D:\root\login\ login.html”。 


另外 ， 站 内 使 用 相对 路 径 时 常用 到 两 个 特殊 符号 :“../” 表 示 当 前 目录 的 上 级 目录 ， 


“../../” 表 示 当 前 目录 的 上 上 级 目录 。 
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2.8.2 ” 超 链接 的 应 用 场合 
在 上 网 时 ， 读 者 可 能 会 发 现 ， 单 击 超 链接 时 ， 有 的 链接 到 其 他 页 面 ， 有 的 链接 到 当前 | 
页 面 ， 还 有 的 直接 打开 邮件 。 实 际 上 根据 超 链接 的 应 用 场合 ， 可 以 把 链接 分 为 3 类 。 | 合 内 
(1) 页 面 间 链 接 ，A 页 到 B 页 ， 最 常用 ， 用 于 网 站 导航 。 | 
(2) 锚 链接 A 页 的 甲 位 置 到 A 页 的 乙 位 置 ， 或 A 页 的 甲 位 置 到 B 页 的 乙 位 置 。 
(3) 功能 性 链接 ， 在 页 面 中 调用 其 他 程序 功能 ， 如 电子 邮件 、QQ 和 MSN 等 。 


1. 页 面 间 链 接 
页 面 间 链 接 就 是 从 一 个 页 面 链接 到 另外 一 个 页 面 。 如 图 2.17 所 示 ，http://www，| 


itzpark.com/ 页 面 间 超 链接 ， 分 别 指向 新 闻 中 心 页 面 和 校 企 合作 页 面 。 


中 关 村 加 一 战略 新 兴 产 业 人 才 发 展 中 心 























图 2.17 页 面 间 链 接 样 式 


2. 锚 链接 | 
常用 于 目标 页 内 容 很 多 ， 需 定位 到 目标 内 容 中 的 某 个 具体 位 置 时 。 当 单 击 某 个 超 链 接 | 
时 , 将 跳 转 到 对 应 的 内 容 介 绍 处 , 这 种 方式 就 是 前 面 说 的 从 A 页 面 的 甲 位 置 跳 转 到 本 页 面 | 


中 的 乙 位 置 ， 语 法 结构 如 下 : 


<a href="#c4"> 查 看 第 4 章 </a> 
<a name="c4"> 第 4 章 </a> 


其 中 , name 为 <a> 标 签 的 属性 , c4 为 标记 名 , 其 功能 类 似 古 时 用 于 固定 船 的 锚 ( 或 钩 ) | 

















所 以 也 称 为 锚 名 。 代 码 如 示例 2.14 所 示 。 
示例 2.14: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 锚 链接 </title> 
</head> 
<body> 
<p><a hre 人 ="#c4"> 查 看 第 4 章 </a></p> 
<h3> 第 1 章 </h3> 


23 。 





各 精通 +CSS 网 页 开发 与 制作 
<p> 本 章 讲解 图 片 相关 知识 .….</p> 
<h3> 第 2 章 </h3> 
<p> 本 章 讲解 文字 相关 知识 .…</p> 
<h3> 第 3 章 </h3> 
<p> 本 章 讲解 动画 相关 知识 .….</p> 
<h3><a name="c4"> 第 4 章 </a></h3> 
<p> 本 章 讲解 图 形 相关 知识 .….</p> 
<h3> 第 5 章 </h3> 
<p> 本 章 讲解 图 片 相关 知识 .….</p> 
<h3> 第 6 章 </h3> 
<p> 本 章 讲解 图 片 相关 知识 .….</p> 

</body> 

</html> 





| 
| 在 浏览 器 中 预览 网 页 ， 效 果 如 图 2.18 所 示 。 单 击 页 面 中 的 超 链 接 ， 即 可 将 “第 4 章 ” 
| 的 内 容 跳 转 到 页 面 顶部 。 


查看 第 4 章 

第 ] 章 

本 章 讲 解 图 片 相关 知识 .… 
第 2 章 

| 本 章 讲 解 文字 相关 知识 … 
第 3 章 

本 音 讲 解 动画 相关 知识 … 
第 4 章 

本 章 讲解 图 形 相关 知识 … 
第 5 章 

本 章 讲 解 图 片 相 关 知 识 … 
第 6 章 


本 章 讲 解 图 片 相关 知识 .. 


图 2.18 ” 锚 链 接 








3. 功能 性 链接 
| 功能 性 链接 比较 特殊 ， 当 单 击 超 链接 时 不 是 打开 某 个 页 面 ， 而 是 启动 本 机 自 带 的 某 个 
应 用 程序 ， 如 常见 的 电子 邮件 、QQ 和 MSN 等 。 接 下 来 以 最 常见 的 电子 邮件 超 链 接 为 例 ， 
当 单 击 “ 联 系 我 们 ”邮件 超 链 接 ， 将 打开 用 户 的 电子 邮件 程序 ， 并 自动 填写 “ 收 件 人 ” 文 
| 本 框 中 的 电子 邮件 地 址 。 电 子 邮件 链接 的 用 法 是 :“mailto: 电 子 邮 件 地 址 ” 例如: 
| <a href="mailto:654218943@163.com"> 联 系 我 们 </a> 
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29 技能 训练 
医 畏 
1. 制作 去 哪儿 网 导航 


需求 说 明 ; 


使 用 学 过 的 标签 制作 去 哪儿 网 的 导航 ， 每 个 导航 都 要 加 上 空 链接 ， 并 且 要 在 新 的 窗口 
打开 新 的 页 面 ， 如 图 2.19 所 示 。 





图 2.19 去 哪儿 网 导航 
2. 练习 摄影 系列 作品 
制作 完成 如 图 2.20 所 示 的 效果 。 


CG 曲 fileVWEV 胶 材 /htmlrcss/ 宰 例 /img5html 

















图 2.20 摄影 作品 
本 章 总 oa 


回 “网 页 基本 标签 包括 标题 标签 <h1> 一 <h6>、 段 落 标签 <p>、 水 平 线 标签 <hr>、 换 行 
标签 <br/> 等 。 

字体 样式 标签 、 上 标 (sup)、 下 标 (sub)。 

图 片 标签 <img/>， 以 及 src 属性 和 alt 属性 。 

超 链接 标签 <a> 的 应 用 ， 超 链接 可 分 为 页 面 间 链 接 、 锚 链接 和 功能 性 链接 。 


四 加 加 
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列表 、 表 格 和 框 染 


列表 在 网 页 设计 、 制 作 中 占有 比较 大 的 比重 。 每 个 网 页 都 有 大 量 的 信息 ， 而 列表 使 这 
些 信 息 排列 有 序 、 条 理 清晰 ， 大 量 精美 、 漂 亮 的 网 页 中 都 使 用 了 列表 。 本 章 将 向 大 家 介绍 
列表 的 概念 及 相关 的 使 用 方法 ， 通 过 练习 掌握 列表 应 用 的 技巧 ， 从 而 可 以 制作 出 精美 的 网 
页 。 同 时， 在 制作 网 页 时 ， 表 格 是 一 种 不 可 或 缺 的 数据 展示 工具 ， 使 用 表格 可 以 灵活 地 实 
现 数据 展示 ， 表 格 在 很 多 页 面 中 还 发 挥 着 页 面 排版 的 作用 。 对 于 页 面 的 排版 和 设计 ， 框 架 
也 是 网 页 制作 过 程 中 一 种 普遍 采用 的 方式 ， 使 用 框架 可 以 极 大 地 提高 页 面 的 复 用 程度 ， 减 
少 重复 开发 ， 因 此 掌握 框架 技术 也 是 网 页 制作 人 员 应 该 具备 的 基本 技能 。 


本 章 工作 任务 | 


> 使 用 列表 展示 数据 
> 使 用 表格 展示 数据 
> 使 用 框架 设计 页 面 


> 会 使 用 有 序列 表 实现 数据 展示 
> 会 使 用 无 序列 表 实现 数据 展示 
六 ”会 使 用 表格 实现 数据 展示 


背诵 英文 单词 | 





请 在 预习 时 找 出 下 列 单词 在 本 章 中 的 用 法 ， 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 





名 精通 +CsS 网 页 开发 与 制作 
table 


type. 
frame, 








IOW- 





column 








caption. 


| | 预习 并 回答 以 下 问题 


1. 列表 分 为 几 种 类 型 ? 分 别 是 什么 ? 
2. 表格 的 作用 是 什么 ?表格 的 用 法 ? 
3. 制作 网 页 过 程 中 用 到 的 框架 有 什么 ? 


3.1 列 表 


顾名思义 ， 列 表 就 是 按 顺 序 显 示 内 容 ， 以 便 使 网 页 更 易 读 。 例 如 京东 商城 首页 的 商品 
分 类 ， 条 理 清晰 、 井 然 有 序 ， 是 列表 应 用 的 一 个 很 好 的 例子 。 文 字 列表 可 以 有 序 地 编排 一 
些 信息 资源 ， 使 其 结构 化 和 条 理化 ， 并 以 列表 的 样式 显示 出 来 ， 以 便 浏览 者 能 更 加 快捷 地 
| 获得 相应 的 信息 。HIML 中 的 文字 列表 如 同文 字 编 辑 软 件 Word 中 的 项 目 符号 列表 和 自动 
编号 列表 。HTML 提供 了 3 种 常用 的 列表 : 无 序列 表 、 有 序列 表 和 自 定义 列表 。 下 面 分 别 对 
这 3 种 列表 详细 讲解 。 


3.1.1 建立 无 序列 表 <ul> 


| 无 序列 表 相 当 于 Word 中 的 项 目 符号 列表 ， 其 项 目 排列 没有 先后 顺序 ， 大 部 分 网 页 列 
| 表 都 采用 无 序列 表 。 通 常 无 序列 表 只 以 符号 或 图 标 作为 分 项 标识 。 无 序列 表 的 列表 标签 采 
| 用 <ul></ul> 标 签 ， 其 中 每 一 个 列表 项 使 用 <li></li> 标 签 ， 代 码 如 示例 3.1 所 示 。 


示例 3.1: 








<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<u> 
< 这 无 序列 表 项 </li> 
< 这 无 序列 表 项 </li> 
<1i> 无 序列 表 项 </li> 
<1i> 无 序列 表 项 <i> 
<1i> 无 序列 表 项 <i> 
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</ul> 


</body> 
</html> 


无 序列 表 结构 中 ， 使 用 <ul><ful> 标 签 表示 一 个 无 序列 表 的 开始 和 结束 ，<li> 标 签 则 表 ， 国内 
示 一 个 列表 项 的 开始 。 人 
在 一 个 无 序列 表 中 可 以 包含 多 个 列表 项 ， 以 下 示例 32 使 用 无 序列 表 实现 文本 的 振 本 DC 
列 显示 。 
示例 3.2: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 幅 套 无 序列 表 </title> 
</head> 
4 
<hl> 网 站 建设 流程 <hl> 
<u> 
<] 记 项 目 需 求 </li> 
<li> 系 统 分 析 
<u> 
<H> 网 站 的 定位 </i> 
<] 户 内 容 收集 </li> 
<1> 栏 目 规划 </i> 
<I 记 网 站 内 容 设 计 </li> 
</u> 
< 中 > 
<1i> 网 页 草 
<u> 
<] 计 制作 网 页 草图 </li> 
<1i> 将 网 页 草图 转换 为 网 页 </li> 
</ul> 
</> 
<li> 站 点 建设 </li> 
<1i> 网 页 布局 </li> 
<] 记 网 站 测试 </li> 
<1i> 站 点 的 发 布 与 站 点 管理 <li> 
</ul> 
</body> 
</html> 


在 浏览 器 中 效果 如 图 3.1 所 示 , 在 无 序列 表 项 中 , 可 以 嵌 套 一 个 列表 。 如 代码 中 的 “ 系 | 
统 分 析 ” 列 表 项 和 “网 页 草图 ”列表 项 中 都 有 下 级 列表 ， 因此 在 相应 的 <l><hi> 标 签 内 又 
增加 了 一 对 <ul></ul> 标 签 。 | 
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网 站 建设 流程 


。 制作 网 页 草图 
。 将 网 页 草图 转换 为 网 页 
站 点 建设 


。 站 点 
。 网 页 布局 

。 网 站 测试 

。 站 点 的 发 布 与 站 点 管理 











图 3.1 无 序列 表 


3.1.2 建立 有 序列 表 <ol> 





| 有 序列 表 类 似 于 Word 中 的 自动 编号 列表 ， 也 就 是 列表 项 有 先后 顺序 的 列表 ， 从 上 到 
| 下 可 以 有 各 种 不 同 的 序列 编号 ， 如 1、2、3 或 a、b、c 等 。 有 序列 表 的 使 用 方法 与 无 序列 
| 表 的 使 用 方法 基本 相同 ， 它 使 用 <ol></ol> 标 签 ， 每 一 个 列表 项 使 用 <l></i> 标 签 ， 每 个 列 
| 表 项 都 有 先后 顺序 之 分 ， 多 数 用 数字 表示 。 代 码 如 示例 3.3 所 示 。 

| 示例 3.3: 


| <!DOCTYPE html> 
| <html> 
| <head> 
<meta charset="UTF-8"> 
<title> 有 序列 表 </title> 
</head> 
<body> 
<ol> 
<li> 第 1 项 </i> 
<l 记 第 2 项 </li> 
<li> 第 3 项 </li> 
</ol> 
</body> 
</html> 


示例 3.4 使 用 有 序列 表 实现 文本 的 排列 显示 ， 代 码 如 下 。 
示例 3.4: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 有 序列 表 </title> 
</head> 
<body> 
<hl> 本 节 内 容 列 表 </h1> 
<oP> 
<1Hi> 认 识 网 页 < 人 > 
<]i> 网 页 与 HIML 差异 </li> 
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<l> 认 识 WEB 标准 </li> | 

<1i> 网 页 设计 与 开发 的 流程 <0i> | 

<li> 与 设计 相关 的 技术 因素 </li> | 

</o> | 

</body> | 

</html> | 
在 浏览 器 中 的 预览 效果 如 图 3.2 所 示 。 

EE | 

CG fileV//EY 教 村 /html+css/ 率 侈 /ollLhtml| | 

本 节 内 容 列 表 

1.， 认 iR 网 页 | 

2 网关 人 | 

4 网 而 设计 与 开业 的 流 得 | 

5 与 设计 相关 的 技术 因素 | 


图 3.2 有 序列 表 
3.1.3 ”建立 不 同类 型 的 无 序列 表 


通过 使 用 多 个 <ul> 标 签 ， 可 以 建立 不 同类 型 的 无 序列 表 。 代 码 如 示例 3.5 所 示 。 
示例 3.5: | 


<!DOCTYPE html> | 
<html> | 
<head> | 
<meta charset="UTF-8"> 
<title> 无 序列 表 </title> 
</head> 
< 
<h4>Disc 项 目 符号 列表 : </h4> 
<ul type="disc"> 
<l 这 苹果 </li> 
<li> 香 燕 </li> 
<l 谊 柠檬 </li> 
<] 这 桔子 </li> | 
<ul> | 
<h4>Circle 项 目 符号 列表 : </h4> | 
<ul type="circle"> | 
<l 这 苹果 </li> | 
<] 谊 香 菊 </li> | 
<] 谊 柠 榜 </li> | 
<] 这 桔子 </li> | 
</ul> | 
<h4>Square 项 目 符号 列表 : </h4> | 
<ul type="square"> | 
<] 记 苹果 </li> | 
<l> 香 蒋 </li> | 
<1i> 柠 样 </li> | 
<l 记 桔子 </li> | 
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发 办 | 在 浏览 器 中 的 预览 效果 如 图 3.3 所 示 。 








D ae 二 D z= 


| CD filey//E/ 通 材 /htmlzcss/ 案 例 /ulhtml 
Note 
| Dise 项 目 符号 列表 ， 


。 苹 果 
。 音 大 
。 本 村 
桔子 





Circle 项 目 符号 列表 : 











| 图 3.3 不 同类 型 的 无 序列 表 
3.1.4 ”建立 不 同类 型 的 有 序列 表 


| 通过 使 用 多 个 <o> 标 签 ， 可 以 建立 不 同类 型 的 有 序列 表 。 代 码 如 示例 3.6 所 示 。 
”示例 3.6: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 有 序列 表 </title> 
</head> 
<body> 
<hl> 数 字 列表 : </hl> 
<o> 
<] 这 苹果 </li> 
<1> 香 莱 </i> 
<I> 柠 样 </i> 
<li> 橘 子 </li> 
</ol> 
<hl> 字 母 列表 : </hl> 
<ol type="A"> <!-- 或 者 使 用 小 写字 母 a--> 
<li> 苹 果 </li> 
<1i> 香 莱 </i> 
<] 记 村 檬 </li> 
<li> 橘 子 </li> 
</ol> 
<hl> 罗 马 数字 列表 : </h1> 
<ol type="T"> <!-- 或 者 使 用 小 写字 母 i--> 
<] 这 苹果 </li> 
<] 这 香 欧 </li> 
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<1> 柠 榜 </> 
<] 这 桔子 </i> 
</ol> 


</body> 
</html> 


在 浏览 器 中 的 效果 如 图 3.4 所 示 。 
A | 
GD filey//E:/ 教 材 /ht 


数字 列表 : 











图 3.4 不 同类 型 的 有 序列 表 


3.1.5 ”建立 做 套 列 表 


撕 套 列表 是 网 页 中 常用 的 元 素 ， 使 用 <ul> 标 签 可 以 制作 网 页 中 的 嵌 套 列表 。 


例 3.7 所 示 。 
示例 3.7: 


<!DOCTYPE html><html> 
<head> 
<meta charset="UTF-8"> 
<fitle> 嵌 套 列 表 </title> 
</head> 
<body> 
<h3> 一 个 嵌 套 列表 </h3> 
<ul> 
<] 记 咖啡 </li> 
<li> 绿 茶 
<u> 
<1i> 中 国 茶 </hi> 
< 这 非洲 茶 </li> 
</ul> 
</> 
<] 谊 牛奶 </li> 
</ul> 
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</body> 
</html> 
在 浏览 器 中 的 显示 效果 如 图 3.5 所 示 。 


访 CG Dfiley//E:/ 教 材 /ht 





Note 一 个 说 套 列表 
。 咖 啡 


* 绿茶 
。 中 国 茶 
。 非洲 荣 
。 和 牛奶 








图 3.5 列表 的 嵌 套 
3.1.6 自 定义 列表 
| 


| 在 HTML 中 , 还 可 以 定义 自 定义 列表 , 通常 表示 名 词 或 者 是 概念 的 定义 。 每 一 个 子 项 
| 由 两 个 部 分 组 成 ， 第 一 部 分 是 名 词 或 者 概念 ， 第 二 部 分 是 相应 的 解释 和 描述 。 自 定义 列表 
| 的 标签 是 <dl>。 代 码 如 示例 3.8 所 示 。 


示例 3.8: 


| <!IDOCTYPE html> 
| <html> 
<head> 
<meta charset="UTF-8"> 
<title> 自 定义 列表 </title> 
</head> 
< 
<h4> 一 个 自 定义 列表 : </h4> 
<d> 
<df> 电 脑 </dt> 
<dd> 是 一 种 能 够 按照 程序 运行 的 电子 设备 ….</dd> 
<d 人 > 显示 器 </dt> 
<dd> 以 视觉 方式 显示 信息 的 装置 …</dd> 
</d> 
</body> 
</html> 


在 浏览 器 中 的 显示 效果 如 图 3.6 所 示 。 
De 本 了 


CSfileycyuserywwwpesl 安 三 | 








一 个 自 定义 列表 : 


电脑 

是 一 种 二 总 按照 程序 运行 的 电子 设备 . 
显示 器 

以 杭 知 方式 显示 信息 的 区 置 .…….- 








图 3.6 自 定义 列表 
最 后 总 结 一 下 列表 常用 的 一 些 技巧 ， 包 括 列表 常用 场合 及 列表 使 用 中 的 注意 





涡 
性 
总 
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回 “无 序列 表 中 的 每 项 都 是 平 级 的 ， 没 有 级 别 之 分 ， 并 且 列 表 中 的 内 容 一 最 都 是 相对 
简单 的 标题 性 质 的 网 页 内 容 ， 而 有 序列 表 则 会 依据 列表 项 的 顺序 进行 显示 。 
加 “在 实际 网 页 应 用 中 ， 无 序列 表 <ul>-<li> 比 有 序列 表 <ol>-<li> 的 应 用 更 加 广泛 , 有 
序列 表 <ol>-<li> 一 般 用 于 显示 带 有 顺序 编号 的 特定 场合 。 
回 自 定义 列表 <dl_<dt> <dd> 一 般 适 用 于 带 有 标题 和 标题 解释 性 内 容 或 者 图 片 和 文 


本 内 容 混 合 排列 的 场合 。 
3.2 表 格 




















HTML 中 表格 不 但 可 以 清晰 地 显示 数据 ， 而 且 可 以 用 于 页 面 布局 。 HL 的 关公 
于 Word 软件 中 的 表格 ， 尤 其 是 使 用 网 页 制作 工具 时 ， 操 作 方法 很 相似 。 

在 HIML 文档 中 , 表格 主要 用 于 显示 数据 , 虽然 可 以 使 用 表格 布局 , 但 是 不 建议 使 用 ， 
因为 代码 会 过 于 元 长 ， 丈 大 于 利 。 表 格 一 般 由 行 、 列 和 单元 格 组 成 ， 如 图 3.7 所 示 。 
































3.2.1 表格 的 基本 语法 


创建 表格 的 基本 语法 如 示例 3.9 所 示 。 
示例 3.9: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table> 
<tr> 
<td> 第 1 个 单元 格 的 内 容 </td> 
<td> 第 2 个 单元 格 的 内 容 </td> 
</tr> 
<tr> 
<td> 第 1 个 单元 格 的 内 容 </td> 
<td> 第 2 个 单元 格 的 内 容 </td> 
</tr> 
</table> 
</body> 
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第 1 个 单元 格 的 内 容 第 2 个 单元 格 的 内 容 
第 1 个 单元 格 的 内 容 第 2 个 单元 格 的 内 容 








图 3.8 表格 的 基本 结构 


在 HTML 中 ， 用 于 标记 表格 的 标记 符 如 下 。 
| <table> 标 签 用 于 标识 一 个 表格 对 象 的 开始 ，</table> 标 签 标识 一 个 表格 对 象 的 结束 。 
| 一 个 表格 中 ， 只 允许 出 现 一 对 <table></table> 标 签 。 

| <tr> 标签 用 于 标识 表格 一 行 的 开始 ，</tr> 标 签 用 于 标识 表格 一 行 的 结束 。 有 多 少 对 
<tr></tr> 标 签 ， 就 表示 该 表格 有 多 少 行 。 

| <td> 标签 用 于 标识 表格 某 行 中 一 个 单元 格 的 开始 ， </td> 标签 用 于 标识 表格 某 行 中 的 一 
| 个 单元 格 结束 。<td></td> 标 签 书写 在 <tr></tr> 标 签 内 ， 一 对 <tr></tr> 标 签 内 有 多 少 对 
| <td></td> 标 签 ， 就 表示 该 行 有 多 少 个 单元 格 。 

| 为 了 显示 表格 的 轮 廊 ， 一 般 还 需要 设置 <table> 标 签 的 “border” 边 框 属性 ， 指 定 边框 
| 的 宽度 。 例 如 ， 在 页 面 中 添加 一 个 2 行 3 列 的 表格 ， 对 应 的 HTML 代码 如 示例 3.10 所 示 。 


示例 3.10: 








<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
< 
<table border="1"> 
<tr> 
<td>1 行 1 列 的 单元 格 </td> 
<td>1 行 2 列 的 单元 格 </td> 
<td>1 行 3 列 的 单元 格 </td> 
</tr> 
<tr> 
<td>2 行 1 列 的 单元 格 </td> 
<td>2 行 2 列 的 单元 格 </td> 
<td>2 行 3 列 的 单元 格 </td> 
</t> 
</table> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 3.9 所 示 。 
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图 3.9 表格 的 边框 属性 | Note 
3.2.2 表格 的 对 齐 方式 


表格 的 对 齐 方式 用 来 控制 表格 在 网 页 中 的 显示 位 置 ， 常 见 的 对 齐 方 式 有 默认 对 齐 、 | 
对 齐 、 居 中 对 齐 和 右 对 齐 ， 当 省 略 该 属性 时 ， 则 系统 自动 采用 默认 对 齐 方 式 。 | 


1. 默认 对 齐 


表格 一 经 创建 ， 便 显示 为 默认 对 齐 ， 默认 对 齐 状 态 下 表格 以 视觉 尺寸 显示 在 左 侧 ， 如 
果 旁 边 有 内 容 ， 这 些 内 容 会 显示 在 表格 的 下 方 ， 不 会 在 表格 的 两 侧 进 行 排列 。 | 


2. 居中 对 齐 | 

有 时 候 ， 希 望 表格 显示 在 页 面 的 中 间 位 置 ， 这 样 会 使 页 面 显 得 对 称 ， 浏 览 效 果 好 ， 这 
时 候 就 需要 对 表格 设置 居中 对 齐 。 | 

3. 左 对 齐 、 右 对 齐 | 

如 果 对 表格 设置 左 对 齐 或 者 右 对 齐 ， 表 格 会 显示 在 页 面 的 左 侧 或 者 右 侧 ， 其 他 内 容 会 
自动 排列 在 表格 旁边 的 空白 位 置 。 | 
3.2.3 ”表格 的 跨行 与 跨 列 | 

在 上 面 介绍 了 简单 表格 的 创建 ， 而 现实 中 往往 需要 较 复杂 的 表格 ， 有 时 就 需要 把 多 个 
单元 格 合 并 为 一 个 单元 格 , 也 就 是 要 用 到 <td> 标 签 中 的 colspan 与 rowspan 属性 , 即 表格 的 | 
跨 列 跨行 功能 。 

1. 表格 的 跨 列 

跨 列 是 指 单元 格 的 横向 合并 ， 语 法 如 下 : 


colspan=" 所 跨 列 数 " 


col 为 column 〈 列 ) 的 缩写 ，span 为 跨度 ， 所 以 colspan 的 意思 为 跨 列 。 
下 面 通过 示例 3.11 来 说 明 colspan 属性 的 用 法 。 


示例 3.11: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 跨 多 列 的 表格 </title> 
</head> 
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! <table border="1" width="200"> 
| <tr> 
<td colspan="2"> 学 生成 绩 单 </td> 
</tr> 
<tr> 
<td> 语 文 </td> 
<td>96</td> 
</tr> 
<tr> 
<td> 数 学 </td> 
<td>98</td> 
</tr> 





<td> 英 语 </td> 
<td>68</td> 
</tr> 
</table> 
</body> 
</html> 


| 在 浏览 器 中 的 效果 如 图 3.10 所 示 。 





| QG 让 fileVWE:/ 教 村 html+css/ 安 于 








图 3.10 表格 的 跨 列 


2. 表格 的 跨行 
跨行 是 指 单元 格 在 垂直 方向 上 合并 ， 语 法 如 下 : 
<table> <tr> 
<tdrowspan=" 所 跨 的 行 数 "> 单元 格 内 容 </td> 
</tr> 
</table> 
row 为 行 的 意思 ，rowspan 即 跨行 。 
下 面 通过 示例 3.12 来 说 明 rowspan 属性 的 用 法 。 


示例 3.12: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
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<body> 
<table width="500" border="1"> 
<tr> 
<td rowspan="3"> 王 朝 </td> | 2 
<td> 性 别 </td> | 全 F_ 
<td> 男 </td> | 9 
Se Note 
“> | 
<td> 地 址 </td> 
<td> 北 京 朝阳 区 </td> 
</tr> 
<tr> 
<td> 身 高 </td> 
<td>180</td> 
</tr> 
<tr> 
<td rowspan="3"> 马 文 </td> 
<td> 性 别 </td> 
<td> 男 </td> 
</tr> 
<tr> <td> 地 址 </td> 
<td> 北 京 海淀 区 </td> 
</tr> 
<tr> 
<td> 身 高 </td> 
<td>175</td> 
</t> 
</table> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 3.11 所 示 。 

一 般 而 言 ， 跨 行 或 跨 列 操作 时 ， 需 要 以 下 两 个 步骤 。 

(1) 在 需要 合并 的 第 一 个 单元 格 ， 设 置 跨 列 或 跨行 属性 ， 如 colspan="3"。 

(2) 删除 被 合并 的 其 他 单元 格 ， 即 把 某 个 单元 格 看 成 多 个 单元 格 合并 后 的 单元 格 。 


CG 口 file/VW/E:/ 教 材 /第 三 童 /演示 案 例 /table22-324 立 村 三 
EE 区 
et 朝阳 区 
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图 3.11 表格 的 跨行 


3. 定义 表格 的 表 头 | 
表格 中 也 有 存在 表 头 的 , 常见 的 表 头 分 为 垂直 和 水 平 两 种 。 示 例 3.13 中 分 别 给 出 了 带 


人 
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有 垂直 和 水 平 表 头 的 表格 ， 代 码 如 下 。 
示例 3.13: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<h4> 水 平 的 表 头 </h4> 
<table border="1"> <tr> 
<td> 姓 名 </td> 
<td> 性 别 </td> 
<td> 电 话 </td> 
</tr> 
<tr> 
<td> 王 文 </td> 
<td> 男 </td> 
<td>18012345678</td> 
</t> 
</table> 
<h4> 徘 直 的 表 头 <h4> 
<table border="1"> 
<tr> 
<td> 姓 名 </td> 
<td> 王 文 </td> 
</tr> 
<tr> 
<td> 性 别 </td> 
<td> 男 </td> 
</tr> 
<tr> 
<td> 电 话 </td> 
<td>18012345678</td> 
</tr> 
</table> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 3.12 所 示 。 


水 平 的 表 头 





姓名 [性 列 间 
Es 








垂直 的 表 闲 
姓名 [ 匡 文 
人 性 别 田 
电话 |18012345678 


图 3.12 定义 表格 的 表 头 
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4. 设置 单元 格 的 行 高 与 列 宽 
使 用 cellpadding 属性 来 创建 单元 格 内 容 与 其 边框 之 间 的 空白 , 从 而 调整 表格 的 行 高 与 
列 宽 代 码 。 如 示例 3.14 所 示 。 


示例 3.14: 


<!IDOCTYPE html> Jote 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<h4> 调 整 前 </h4> 
<table border="1"> 
<tr> 
<td>1000</td> 
<td>2000</td> | 
</tr> | 
<tr> | 





<td>2000</td> 
<td>3000</td> 

</t> | 

</table> | 

<h4> 调 整 后 </h4> | 

<table border="1" cellpadding="10"> | 


















































图 3.13 表格 的 行 高 与 列 宽 
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5. 完整 的 表格 标签 


上 面 讲述 了 表格 中 最 常用 〈 也 是 最 基本 ) 的 3 个 标签 <table>、<tr> 和 <td>， 使 用 它们 
可 以 构建 出 最 简单 的 表格 。 为 了 让 表格 结构 更 清楚 , 表格 中 还 会 出 现 表 头 、 主 体 和 脚注 等 。 
按照 表格 结构 ， 可 以 把 表格 的 行 分 组 ， 称 为 “ 行 组 ”。 不 同 的 行 组 具有 不 同 的 意义 。 
表 头 、 主 体 和 脚注 。 三 者 相应 的 HTML 标签 依次 为 <thead>、<tbody> 和 
<tfoot>， 此 外 ， 在 表格 中 还 有 一 个 标签 ， 即 <caption> 标 签 表示 表格 的 标题 。 完 整 的 表格 代 
码 如 示例 3.15 所 示 。 





示例 3.15: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<table border="1"> 
<caption> 学 生成 绩 单 </caption> 
<thead> 
<tr> 
<th> 姓 名 </th> 
<th> 性 别 </th> 
<th> 成 绩 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 张 三 </td> 
<td> 男 </td> 
<td>520</td> 
</t> 
<tr> 
<td> 李 四 </td> 
<td> 男 </td> 
<td>560</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td> 平 均 分 </td> 
<td colspan="2">540</td> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 3.14 所 示 。 
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图 3.14 完整 的 表格 结构 


3.3 框 架 


框架 就 是 把 网 页 界面 分 成 几 个 窗 体 框 , 每 个 窗 体 框 都 可 以 单独 显示 不 同 的 HTML 网 页 ，| 
每 份 HTML 页 面 称 为 一 个 框架 。 框 架 是 HTML 早期 的 应 用 技术 ， 但 目前 还 有 部 分 网 站 在 使 
用 ， 通 常 大 多 数 网 站 后 台 或 者 是 内 网 系统 的 布局 都 采用 框架 结构 。 如 图 3.15 所 示 ， 粗 线 标 | 
识 的 部 分 就 代表 一 个 “框架 ”， 每 个 框架 对 应 一 个 页 面 。 使 用 框架 技术 具有 以 下 好 处 。 





后 
CS 








图 3.15 框架 型 页 面 
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回 ”在 同一 个 浏览 器 窗口 显示 多 个 页 面 。 使 用 框架 能 有 机 地 把 多 个 页 面 组 合 在 一 起 ， 


但 各 个 页 面 间 相 互 独立 。 
































面 ， 方 便 其 他 页 面 复 用 。 


常用 的 框架 技术 有 以 下 两 种 。 





成 一 个 框架 。 这 种 结构 非常 清晰 ， 适 用 于 整个 页 面 都 用 框架 实现 的 场合 。 

















外 的 页 面 内 容 ， 使 用 比较 方便 、 灵 活 。 
考虑 到 框架 的 结构 清晰 ， 先 用 它 来 讲解 框架 的 基本 结构 。 


3.3.1 <frameset> 框 架 


| <frame> 标 签 定义 放置 在 每 个 框架 中 的 HTML 页 面 。 基 本 语法 如 下 : 


<frameset cols="25%,50%,*" IOWS ="50%,*" border="5"> 
<frame src="the_firsthtml "/> 
<frame src="the_second.html "/> 


</frameset> 


加” 可 以 实现 页 面 复 用 。 例 如 ， 为 了 保证 网 站 的 统一 风格 ， 网 站 每 个 页 面 的 底部 和 项 
部 一 般 都 相同 。 因 此 ， 可 以 利用 框架 技术 ， 将 网 站 的 顶部 或 底部 单独 作为 一 个 页 


回 “实现 典型 的 “目录 结构 ” 即 左 侧目 录 、 右 侧 内 容 ， 当 用 户 单 击 左 侧 窗口 的 目录 时 , 在 右 侧 
窗口 中 显示 具体 内容， 如 网 上 在 线 学 习 教 程 、 论 坛 、 后 台 管 理 、 产 品 介绍 等 网 页 
都 是 这 样 的 页 面 结 构 。 当 然 ， 这 种 结构 除 能 用 框架 技术 实现 外 ， 也 可 采用 其 他 技 

回 ”框架 (<frameset>): 这 是 早期 的 框架 技术 ， 页 面 各 窗口 全 部 用 <frame> 实 现 ， 形 


回 ”内 联 框架 (<iframe>): 页 面 中 的 部 分 内 容 用 框架 实现 ， 一 般 用 于 在 页 面 中 引用 站 


框架 包含 <frameset> 和 <frame> 两 个 标签 ， 其 中 <frameset> 标 签 描述 窗口 的 分 割 ， 


其 中 ，<framese 忆 标签 的 cols 属性 表示 将 页 面 横 向 分 割 为 几 列 。 例 如 ，cols="25%,50%,*" 表 示 





符 页 面 分 割 为 3 列 ， 第 一 列 占 浏览 器 窗口 总 宽度 的 25%， 第 二 列 占 50%， 第 三 列 占 剩余 部 


| 分 。 各 列 的 宽度 值 也 可 使 用 具体 数值 (单位 为 px)。 同 理 ,rows 属性 表示 将 页 面 纵 向 分 割 为 
| 几 行 。 另 外 ，<frame> 标 签 的 src 属性 类 似 于 <img> 标 签 的 sre 属性 ， 表 示 页 面 的 路 径 。 下 

















| 面 逐一 讲解 框架 的 纵向 、 横 向 及 横 、 纵 向 同时 分 割 的 实现 方法 。 
| 1， 纵 向 分 割 窗口 
































如 图 3.16 所 示 是 纵向 分 割 页 面 的 效果 。 
EE nt ri 
ee 被 分 割 为 3 个 窗口 ， 即 3 行 ， 显 然 应 使 用 <frameset> 
标签 的 rows 属性 。 
Ee 各 框架 对 应 的 页 面 情况 : 使 用 <frame> 标 签 的 src 
属性 引用 各 框架 对 应 的 页 面 文件 ， 同 时 还 可 以 使 用 


图 3.16 纵向 分 割 为 上 、 中 、 下 3 个 窗口 name 属性 标识 各 框架 窗口 。 
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| 

需要 注意 的 是 ，<frameset> 标 签 和 <body> 标 签 不 能 同时 使 用 ,所 以 需要 使 用 <frameset> 
标签 代 蔡 页 面 中 的 <body> 标 签 。 代 码 如 示例 3.16 〈(a) 所 示 。 




















示例 3.16 (a) [index1.html]: 


<html> 


医 网 
<head> 


<tide> 纵 向 分 割 为 3 个 窗口 </title> | Note 
</head> | 
<frameset bordercolor="red" rows="25%,50%,*" border="5"> | 
<frame src="subframe/the_first.html" name="top" /> | 
<frame src="subframe/the_second.html" name="middle" /> 
<frame src="subframe/the_ third.html" name="bottom" /> 
</frameset> 
</html> 


其 中 ， 为 了 突出 显示 各 框架 ， 加 了 宽度 为 5 的 红色 边框 。 另 外 ， 由 于 框架 网 页 包含 多 
个 页 面 ， 为 了 分 清 框架 结构 页 及 各 框架 窗口 对 应 的 子 页 面 ， 特 意 将 各 子 页 面 单独 放 到 文件 | 
夹 subframe 中 。 | 
2， 模 向 分 割 窗口 | 
横向 分 割 窗口 的 思路 与 纵向 分 割 窗 口 很 类 似 , 例如 ， 要 实现 如 图 3.17 所 示 的 横向 分 割 | 
的 页 面 效果 ， 只 需要 设置 <frameset> 标 签 的 cols 属性 即 可 。 代 码 如 示例 3.16 (b) 所 示 。 
示例 3.16 (b) [index2.html]: 


<html> 
<head> 
<title> 横 向 分 割 3 个 窗口 </title> 
</head> 
<frameset cols="200,*,200" border="5" bordercolor="#FF0000"> | 
<frame name="leftFrame" src="subframe/the_firsthtml" /> | 
<frame name="mainFrame" src="subframe/the_second.html" /> | 
<frame name="rightFrame" src="subframe/the_third.html" /> | 
</frameset> 
</html> 


在 浏览 器 中 的 效果 如 图 3.17 所 示 。 
3， 横 向 和 纵向 同时 分 割 窗口 
如 图 3.18 所 示 是 最 常见 的 横向 、 纵 向 同时 分 割 的 页 面 框架 。 


| 

| 

| 

| 

top | 
| 

| 

| 

第 二 个 窗口 | 
right | 
! 

| 

| 

| 

| 

| 

! 

人 





图 3.17 横向 分 割 为 左 、 中 、 右 3 个 窗口 图 3.18 横向、 纵向 分 割 页 面 
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% 
对 整个 页 面 结构 的 分 析 如 下 。 
(1) 整个 页 面 纵向 分 割 为 上 、 下 两 部 分 ， 高 度 分 别 为 窗口 的 20% 和 80%， 对 应 的 关 
， | 键 代码 如 下 : 
入 二 | <frameset rows="20%,*" > 
| <frame src="Top 窗口 对 应 文件 "> 


Note <frame src=" 下 部 分 窗口 对 应 文件 "/> 
! </frameset> 


| (2) 下 部 分 再 次 横向 分 割 为 左 、 右 两 部 分 ， 宽 度 分 别 为 窗口 的 20% 和 80%。 即 需要 
| 把 上 述 第 二 个 <frame> 改 为 <frameset> 实 现 ， 对 应 的 关键 代码 如 下 : 


| <frameset rows="20%,*" > 
| <frame src="Top 窗口 对 应 文件 "/> 
| <frameset cols="20%,*"> 
<frame src="Left 窗口 对 应 文件 "> 
<frame src="Right 窗口 对 应 文件 "> 
</frameset> 
</frameset> 


| 示例 3.17 给 出 了 最 终 的 实现 代码 。 
示例 3.17: 


! <html> 
<head> 
<title> 创 建 多 框架 页 面 </title> 
</head> 
<frameset rows="20%,*" frameborder="0"> 
<frame src="subframe/top.html" name="topframe" scrolling="no" noresize="noresize" /> 
<frameset cols="20%,*"> 
<frame src="subframe/left.html" name="leftframe"scrolling="no" noresize="noresize" /> 
<frame src="subframe/righthtml" name="rightframe" /> 
</frameset> 
</frameset> 
</html> 


3.3.2 ”<iframe> 内 联 框架 


| 前 面 学 习 的 <frameset> 框 架 适 用 于 整个 页 面 都 用 框架 实现 的 场合 。 本 小 节 将 学 习 
| <iframe> 内 联 框架 ， 它 适用 于 将 部 分 框架 内 嵌入 页 面 的 场合 ， 一 般 用 于 引用 其 他 网 站 的 页 
| 面 。 例 如 ， 在 自己 制作 的 网 页 中 引用 搜狐 网 页 的 新 闻 页 面 等 。 
<iframe> 的 用 法 和 <frame> 比 较 类 似 ， 语 法 如 下 : 

<iframe src=" 引 用 页 面 地 址 "name=" 框 架 标 识 名 ”frameborder=" 边 框 ” scrolling=" 是 否 出 现 滚动 条 


| 用 <iffame> 展 示 一 个 一 行 两 列 的 页 面 的 代码 ， 如 示例 3.18 所 示 。 
| 示例 3.18， 
| <html> 
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<head> | 

<title>iframe 简单 使 用 </title> | 
</head> 
<body> | 
<ifiame sre="subfiame/the_one html" width="290px" height="136px" frameborder="1" scrolling= "no" /> | 
<iframe sre="subframe/the_second .html" width="400px"height="236px" scrolling="no"></iframe> | 








</body> | 

i | Note 
在 浏览 器 中 的 效果 如 图 3.19 所 示 。 | 
2 Deen a EEE TET TT | 





图 3.19 这 ame 的 简单 使 用 


3.4 技能 训练 


1. 制作 树 形 菜单 

模拟 “我 的 电脑 ”中 的 磁盘 文件 管理 , 显示 磁盘 与 文件 之 间 的 关系 , 完成 效果 如 图 3.20 
所 示 。 

2. 制作 凡 客 商品 介绍 模块 

使 用 自 定义 列表 制作 凡 客 商品 介绍 模块 ， 完 成 效果 如 图 3.21 所 示 。 


D Se 
3 fieND/G 至 


本 
1 
Pepper 
下 件 套 
ha 
我 的 电脑 文件 列表 
,我 的 电脑 
=* 本 地 磁盘 (C:) ET 
m china-drm | 权 | 


a Intel | 
a Program Files 


。 本 地 磁盘 (D:) 
于 MyDownloads 
m gycache 
a 软件 











图 3.20 “我 的 电脑 ”列表 图 3.21 凡 客 商品 介绍 
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制作 学 生成 绩 表 


需求 说 明 : 建立 一 个 表格 ， 实 现 如 图 3.22 所 示 的 效果 。 


加固 四 加 














图 3.22 学生 成绩 表 


本 章 总结 


列表 的 分 类 : 无 序列 表 、 有 序列 表 和 自 定义 列表 。 
列表 的 语法 结构 和 应 用 ， 主 要 应 用 于 新 闻 、 导 航 部 分 。 
表格 的 应 用 。 

<frameset> 框 架 和 <iframe> 内 联 框 架 。 
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表单 


表单 是 可 以 把 浏览 者 输入 的 数据 传送 到 服务 器 端的 HTML 标签 元 素 , 服务 器 端 程序 可 
以 处 理 表 单传 过 来 的 数据 ， 从 而 完成 与 用 户 的 各 种 交互 动作 。 表 单 是 实现 用 户 与 网 页 之 间 
数据 交互 的 必要 标签 ， 通 过 在 网 页 中 添加 表单 可 以 实现 诸如 会 员 注 册 、 用 户 登 录 、 提 交 资 
料 等 交互 功能 (如 BBS、 会 员 注册 登录 系统 、 电 商 购物 系统 等 )， 本章 将 主要 讲解 如 何在 
网 页 中 制作 表单 ,并 使 用 表单 元 素 创建 表单 .为 了 能 够 提供 对 当前 互联 网 搜索 引擎 的 支持 ， 
还 讲解 了 如 何 制作 符合 语义 化 规范 要 求 的 表单 。 


本 章 工 作 任务 | 
> 制作 语义 化 的 表单 


本 章 技能 目标 





> 会 使 用 表单 元 素 布局 表单 
> 会 制作 语义 化 的 表单 


背诵 英文 单词 


请 在 预习 时 找 出 下 列 单词 在 本 章 中 的 用 法 , 了 解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
form. 
option. 
text 





button 
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会 办， [ 瑞 习 并 回答 以 下 问题 


1. 请 说 出 语义 化 的 概念 。 


2. 常见 的 表单 元 素 有 哪些 ? 
3. 制作 一 个 下 拉 列 表 需 要 使 用 哪些 表单 元 素 标签 ? 


4.1 表单 概述 


表单 是 网 页 浏览 者 同 互联 网 服务 器 互动 的 界面 。 使 用 表单 可 以 收集 用 户 信息 ， 如 果 你 
有 个 人 主页 ， 也 可 以 为 它 制作 一 份 表 单 ， 用 以 收集 浏览 者 的 反馈 信息 。 例 如 当 我 们 申请 一 
个 电子 邮箱 时 也 是 用 表单 将 个 人 资料 发 送 到 服务 器 上 。 

网 页 上 具有 可 输入 表 项 及 项 目 选择 等 控件 所 组 成 的 栏目 称 为 表单 ， 其 中 包含 多 种 对 
象 ， 如 文字 输入 框 、 单 选 按钮 、 复 选 按钮 和 提交 按钮 等 。 通 俗 地 讲 ， 表 单 就 是 一 个 将 用 户 
信息 组 织 起 来 的 容器 。 将 需要 用 户 填写 的 内 容 放置 在 表单 容器 中 ， 当 用 户 单 击 “提交 ” 按 
钮 的 时 候 ， 表 单 会 将 数据 统一 发 送 给 服务 器 。 

表单 的 应 用 比较 常见 ， 典 型 的 应 用 场景 如 下 。 

回 登录、 注册 : 登录 时 填写 用 户 名 、 密 码 ， 注 册 时 填写 姓名 、 电 话 等 个 人 信息 。 

回 ”网 上 订单 : 在 网 上 购买 商品 ， 一 般 要 求 填写 姓名 、 联 系 方式 、 付 款 方式 等 信息 。 

回 ”调查 问卷 : 回答 对 某 些 问题 的 看 法 ， 以 便 形 成 统计 数据 ， 方 便 分 析 。 

回 ” 网 上 搜索 : 输入 关键 字 ， 搜 索 想 要 的 可 用 信息 。 

为 了 方便 用 户 操作 ， 表 单 提供 了 多 种 表单 元 素 ， 如 图 4.1 所 示 的 是 英雄 美人 网 页 的 用 
户 注 册页 面 ， 该 页 面 就 是 由 一 个 典型 的 表单 构成 。 除 了 最 常见 的 单行 文本 框 之 外 ， 还 有 密 

码 框 、 单 选 按钮 、 下 拉 列 表 框 和 提交 按钮 等 表单 元 素 。 


. 闫 #40. 





图 4.1 表单 结构 


s。 50 。 





4.2 表单 的 内 容 


创建 表单 后 ， 就 可 以 在 表单 中 放置 控件 以 接受 用 户 的 输入 。 这 些 控件 通常 放 在 全 网 
<form></form> 标 签 之 间 一 起 使 用 ， 也 可 以 在 表单 之 外 用 来 创建 用 户 界面 。 常 用 的 控件 有 国 (号 
让 用 户 输入 姓名 的 单行 文本 框 、 输 入 密码 的 密码 框 、 选 择 性 别 的 单 选 按钮 ， 以 及 提交 信息 | 
的 提交 按钮 等 。 

不 同 的 表单 控件 有 不 同 的 用 途 : 如 果 要 求 输入 的 仅仅 是 一 些 文字 信息 , 如 “姓名 ”“ 备 | 
注 ” 和 “和 留言” 等， 一 般 使 用 单行 文本 框 或 多 行文 本 框 ， 如 果 要 求 在 指定 的 范围 内 做 出 选 
择 ， 一 般 使 用 单 选 按钮 、 复 选 框 和 下 拉 列 表 框 ， 如 果 要 把 填写 好 的 表单 信息 提交 给 服务 器 ， | 
一 般 使 用 提交 按钮 ， 如 图 4.1 中 所 示 的 “快速 注册 ”按钮 。 | 








4.3 表单 标签 和 基本 的 属性 


在 HIML 中 ， 使 用 <form> 标 签 来 实现 表单 的 创建 ， 该 标签 属于 一 个 容器 标签 ， 其 他 
表单 标签 需要 在 它 的 范围 中 才 有 效 ，<input> 便 是 其 中 的 一 个 , 用 以 设 定 各 种 输入 资料 的 方 | 
法 。<form> 标 签 有 两 个 常用 的 属性 ， 如 表 4.1 所 示 。 | 


表 4.1 <form> 标 签 的 属性 


属 性 说 了 明 | 
此 属性 指示 服务 器 上 处 理 表单 输出 的 程序 。 一 般 来 说 ， 当 用 户 单 击 表单 上 的 “提交 ”按钮 | 
action 后 , 信息 发 送 到 Web 服务 器 上 , 由 action 属性 所 指定 的 程序 处 理 。 语 法 为 action="URL"。 | 
如 果 action 属性 的 值 为 空 ， 则 默认 表单 提交 到 本 页 | 
此 属性 告诉 浏览 器 如 何 将 数据 发 送 给 服务 器 ， 它 指定 向 服务 器 发 送 数据 的 方法 (用 post | 
方法 还 是 用 get 方法 ) 。 如 果 值 为 get， 浏 览 器 将 创建 一 个 请 求 ， 该 请 求 包含 页 面 URL、 
method | 一 个 问号 和 表单 的 值 。 浏 览 器 会 将 该 请 求 返回 给 URL 中 指定 的 脚本 ， 以 进行 处 理 。 如 果 
将 值 指定 为 post， 表 单 上 的 数据 会 作为 一 个 数据 块 发 送 到 脚本 ， 而 不 使 用 请 求 字符 串 。 语 
法 为 method = "get | post" 








4.4 添加 单行 文本 输入 框 
文本 框 是 一 种 让 用 户 自 己 输 入 内 容 的 表单 对 象 ， 通 常 被 用 来 填写 单个 字 或 者 简短 的 回 
答 ， 如 用 户 姓名 和 地 址 等 。 语 法 如 下 : | 


<input type ="text" name="" size="" maxlength="" value=""/> 


其 中 ，type="text" 定 义 单行 文本 输入 框 ，name 属性 定义 文本 框 的 名 称 ， 要 保证 数据 的 
准确 采集 ， 必 须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ， 单 位 是 单个 字符 
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宽度 ，maxlength 属性 定义 最 多 输入 的 字符 数 ，value 属性 定义 文本 框 的 初始 值 。 代 码 如 示 
| 例 4.1 所 示 。 
示例 4.1: 


刁 闪 <!DOCTYPE html> 


<html lang="en"> 
ee 
<meta charset="UTF-8"> 
<title> 输 入 用 户 的 姓名 </title> 
</head> 
<body> 
<form> 
请 输入 您 的 姓名 : 
<input type="text" name="yourname" size="20" maxlength="15"/> 
请 输入 您 的 地 址 : 
<input type="text" name="youradr" size="20" maxlength="15"/> 


在 浏览 器 中 的 效果 如 图 4.2 所 示 。 


和合 铂 和 用户 的 竹 名 - Windows Intern、 | 到 加 | 
< 江洲 nttpy/ocalhostt "| be 














高 收藏 拓 ” 育 锚 ] 吓 议 网站” 络 ] 网 页 快讯 库 
优 输入 用 户 的 姓名 | BA ~ Bod 
请 输入 您 的 姓名 : 
请 输入 您 的 地 址 : 





食 internet | 保护 异 式 :公用 人 7 下 150% ~ 





图 4.2 单行 文本 输入 框 


4.5 添加 多 行文 本 输入 框 


多 行文 本 输入 框 (textarea) 主 要 用 于 输入 较 长 的 文本 信息 。 语 法 如 下 : 

<textarea name="" cols="" rows="" wrap=""></textarea> 
| 其 中 ，name 属性 定义 多 行文 本 框 的 名 称 ， 要 保证 数据 的 准确 采集 ， 必 须 定义 一 个 独 
| 一 无 二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ， 单 位 是 单个 字符 宽度 ; rows 属性 定义 多 
| 行文 本 框 的 高 度 ; 单位 是 单个 字符 高 度 ; wrap 属性 定义 输入 内 容 大 于 文本 区 域 时 的 显示 方 
| 式 。 示 例 42 展现 了 如 何 添加 多 行文 本 输入 框 。 
| 示例 42; 


<!DOCTYPE html> 
<html lang= "en"> 
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<head> 
<meta charset="UTF-8"> 
<title> 多 行文 本 </title> | 
</head> | ; 
ea | 芯 
<form> | 一 一 
请 输入 您 的 最 新 工作 情况 ><br /> Note 
<textarea name="yourworks" cols="50" rows="5"></textarea> ! 
<br > 
<input type="submit" value=" 提 交 "/> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.3 所 示 。 


合 多 行文 本 - Windows Intemet Explorer 

(Te nt//ocahost [S| |X ||P Bng 

“收藏 天 。 计 续 娃 议 网 站 ” 缀 | 网 页 快 信守 

各 多 行文 本 和合 >" 国 "也 叫 v 页 (Pv > 
请 输入 您 的 最 新 工作 情况 > 





提交 | 





总 Internet | 保护 导 式 禁用 


图 4.3 多 行文 本 输入 框 
4.6 添加 密码 输入 杠 


密码 输入 框 是 一 种 特殊 的 文本 域 ， 主 要 用 于 输入 一 些 保密 信息 。 当 网 页 浏览 者 输入 文 
本 时 ， 框 中 显示 的 是 黑 点 或 者 其 他 符号 ， 这 样 就 增加 了 输入 文本 的 安全 性 。 语 法 如 下 : | 


<input type="password" name="" size="" maxlength=""/> 


其 中 , type="password" 定 义 密码 框 ; name 属性 定义 密码 框 的 名 称 , 要 保证 唯一 性 ; size 
属性 定义 密码 框 的 宽度 ， 单 位 是 单个 字符 宽度 maxlength 属性 定义 最 多 输入 的 字符 数 。 
代码 如 示例 4.3 所 示 。 


示例 4.3: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 


<form> 国 
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用 户 姓名 : 
<input type="text" name="yourname"/> 
登录 密码 : 
<input type="password" name="yourpw"/><br/> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.4 所 示 。 


优 Title - Windows ntemet Exp.. lS .0 
[加 mpynocathost! = |B 


种] 寻 汉 网 站 总 ] 网 页 快讯 库 





局 Internet| 保 护 柑 式 :禁用 全 > 态 150% ~ 


图 4.4 ”密码 输入 框 


4.7 添加 单 选 按钮 


单 选 按钮 主要 是 让 用 户 在 一 组 选择 项 里 只 能 选择 一 个 。 语 法 如 下 : 

<input type="radio" name="" value=""/> 

其 中 ，type="radio" 定 义 单 选 按钮 name 属性 定义 单 选 按钮 的 名 称 ， 单 选 按钮 都 是 以 
组 为 单位 使 用 的 ， 在 同一 组 中 的 单 选项 都 必须 用 同一 个 名 称 ，value 属性 定义 单 选 按钮 的 
值 ， 在 同一 组 中 ， 它 们 的 域 值 必须 是 不 同 的 。 代 码 如 示例 4.4 所 示 。 




















示例 4.4: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<form> 
请 选择 您 感 兴趣 的 图 书 类 型 : 
<br> 
<input type="radio" name="book" value="Bookl"/> 网 站 编程 <br> 
<input type="radio" name="book" value="Book2"/> 办 公 软 件 <br> 
<input type="radio" name="book" value="Book3"/> 设 计 软 件 <br/> 
<input type="radio" name="book" value="Book4"/> 网 络 管理 <br/> 
<input type="radio" name="book" value="Books" 人 > 黑客 攻防 <br> 
</form> 
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</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.5 所 示 。 


忌 Interet1 保 护 怪 式 全 ”到 150% ~ 


图 4.5 单 选 按钮 


4.8 添加 复 选 框 





复 选 框 主要 是 让 用 户 在 一 组 选项 里 可 以 同时 选择 多 个 选项 。 每 个 复 选 框 都 是 一 个 独立 
的 元 素 ， 都 必须 有 一 个 唯一 的 名 称 。 语 法 如 下 : 

<input type="checkbox" name="" value=""/> | 

其 中 , type="checkbox" 定 义 复 选 框 ; name 属性 定义 复 选 框 的 名 称 , 在 同一 组 复 选 框 中 | 
都 必须 用 同一 个 名 称 ，value 属性 定义 复 选 框 的 值 。 代 码 如 示例 4.5 所 示 。 | 

示例 4.5: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<form> 
请 选择 您 感 兴趣 的 图 书 类 型 ，<br 人 
<input type="checkbox" name="book" value="Bookl"/> 网 站 编辑 <br /> 
<input type="checkbox" name="book" value="Book2"/> 办 公 软 件 <br /> 
<input type="checkbox" name="book" value="Book3"/> 设 计 软 件 <br /> 
<input type="checkbox" name="book" value="Book4"/> 网 络 管理 <br /> 
<input type="checkbox" name="book" value="Book5" checked/> 黑 客 攻 防 <br /> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.6 所 示 。 
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无 标 丁 文档 x 
请 选择 您 感 兴趣 的 图 书 类 型 ; 
百 网 站 编辑 

办 公 软 件 
百 设 计 软 件 

网 络 管理 
加 黑客 攻防 





图 4.6 复 选 框 


4.9 添加 下 拉 列 表 框 


用 作 复 选 。 语 法 如 下 : 


<select name="" size="" multiple> 
<option value="" selected>xxxxxxxx</option> 
</select> 


属性 表示 默认 已 经 选中 本 选项 。 代 码 如 示例 4.6 所 示 。 
示例 4.6: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<form> 
请 选择 您 喜欢 的 图 书 类 型 ，<br /> 
<select name="fruit" size="3" multiple> 
<option value="Book1"> 网 站 编辑 </option> 
<option value="Book2"> 办 公 软 件 </option> 
| <option value="Book3"> 设 计 软 件 </option> 
<option value="Book4"> 网 络 管理 </option> 
<option value="Book5"> 黑 客 攻 防 </option> 
</select> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.7 所 示 。 
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下 拉 列 表 框 主 要 用 于 在 有 限 的 空间 里 设置 多 个 选项 ， 其 选项 既 可 以 用 作 单 选 ， 也 可 以 


其 中 ，size 属性 定义 下 拉 列 表 框 的 行 数 ， name 属性 定义 下 拉 列 表 框 的 名 称 ，multiple 
属性 表示 可 以 多 选 , 如果 不 设 置 本 属性 , 就 只 能 单 选 ; value 属性 定义 选择 项 的 值 ; 


selected 


GO p/hot -al 


亡 收 枯 天 “将 倒 | 建议 网 站 镍 | 网 大 读 车 
BTitle 国民 让 中 、 jd 


请 选择 您 喜欢 的 图 书 类 型 ， 
站 编辑 ^ 








全 Intemet | 保本 式 .要 用 


图 4.7 下 拉 列 表 框 
4.10 ”添加 普通 按钮 


普通 按钮 用 来 处 理 用 户 的 点 击 事件 ， 语 法 如 下 : 
<input type="button" name="" value="" onClick=""/> 


其 中 ,type="button" 定义 普通 按钮 name 属性 定义 普通 按钮 的 名 称 ; value 属性 定义 ， 
按钮 的 显示 文字 : onclick 属性 表示 单 击 行为 ， 也 可 以 是 其 他 的 事件 ， 通 过 指定 脚本 函数 来 ， 
定义 按钮 的 行为 。 代 码 如 示例 4.7 所 示 。 


示例 4.7: 


<!DOCTYPE html> 
<html lang="en"> | 
<head> | 
<meta charset="UTF-8"> | 
<title>Title</title> 


点 击 下 面 的 按钮 ， 把 文本 框 1 的 内 容 拷贝 到 文本 框 2 中 : | 
<br/> | 
文本 框 1，<input type="text" id="field1" value=" 学 习 HTML 技术 "> | 
<br 这 | 
文本 框 2: <input type="text" id="field2"/> | 
<br /> | 
<input type="button" name=" value=" 点 击 我 " onclick="document. getElementById ("field2"). | 
value=document.getElementById("field1").value"/> | 
</form> | 

</body> | 
</html> | 
在 浏览 器 中 的 效果 如 图 4.8 所 示 。 | 
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O06. [图 ntpyiocahost ~[ ST + XP ang 
禄 收藏 天 “ 竟 描 建议 网 站 巷 ] 网 页 快讯 库 
Title 疗 | 慌 - 窟 全 ~、 忆 2 
点 击 下 面 的 技 钮 ， 把 文本 框 1 的 内 容 拷 贝 到 
文本 框 2 中 : 

文本 框 1: 学 习 HTML 技 术 

文本 框 2: 学 习 HTML 技 术 

点 击 我 | 











仿 Intemet | 保护 识 式 共用 


图 4.8 普通 按钮 





4.11 添加 提交 按钮 


提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 语 法 如 下 : 
| <input type="submit" name="" value=""/> 


| 其 中 ，type="submit" 定义 提交 按钮 ， name 属性 定义 提交 按钮 的 名 称 ;value 属性 定义 
| 按钮 的 显示 文字 。 表 单 的 method 属性 定义 文件 提交 的 方式 ， 通 过 提交 按钮 可 以 将 表单 里 
| 的 信息 提交 给 表单 里 action 所 指向 的 文件 。 代 码 如 示例 4.8 所 示 。 

示例 4.8: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
| <meta charset="UTF-8"> 
| <title>Title</title> 
! </head> 
| b> 
<form action="http://www.yinhangit.com/yonghu.asp" method="post"> 
请 输入 您 的 姓名 : 

| <input type="text" name="youmame"/> 
| <br/> 
| 请 输入 您 的 地 址 : 

<input type= "text" name="youradr"/> 

<br /> 

请 输入 您 的 单位 : 

<input type="text" name="yourcom"/> 

<br/> 

请 输入 您 的 联系 方式 : 

<input type="text" name="yourtel"/> 

<br 这 

<input type="submit' value=" 提 交 "/> 
</form> 
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</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.9 所 示 。 


收 基 夹 评 弛 | 建议 网 站 ” 合 ] 网 页 快讯 库 ~ 


合 Title 号 -~ 国 - 巨 曾 ” Pv ” 





请 输入 您 的 姓名 : 
请 输入 您 的 地 址 : 


请 输入 您 的 单位 : 
请 输入 您 的 联系 方式 : 





图 4.9 提交 按钮 | 

在 示例 4.8 中 ， 若 把 method-"post" 改 为 method-"get"， 就 变 成 了 使 用 get 方法 将 表单 | 
提交 给 yonghu.asp 页 面 处 理 。 这 两 种 方法 都 是 将 表单 数据 提交 给 服务 器 上 指定 的 程序 进行 | 
处 理 ， 那 有 什么 区 别 呢 ? | 

先 来 看 看 采用 post 和 get 方法 提交 表单 信息 后 浏览 器 地 址 栏 的 变化 。 
以 post 方法 提交 表单 ， 在 “姓名 ”和 “地 址 ”标签 后 ， 分 别 输入 用 户 名 luck 和 地 址 | 
beijing， 单 击 “ 提 交 ” 按 钮 ， 页 面 效果 如 图 4.10 所 示 。 | 








了 了 帆 ” PP)" 妆 e” IA(O)” D> ” 


久 Internet Explorer 无 法 显示 该 网 页 


您 可 以 罕 越 以 下 操作 


攻 TT 





图 4.10 ”以 post 方 法 提交 信息 


注意 地 址 栏 中 的 URL 信息 没有 发 生变 化 ， 这 就 是 以 post 方法 提交 表单 的 特点 。 
以 get 方法 提交 表单 ， 在 页 面 单 击 “ 提 交 ” 按 钮 ， 页 面 效 果 如 图 4.11 所 示 。 


Tree 





Ez 





[ Internet Explorer 无 法 显示 该 网 页 


您 可 以 过 试 以 下 泽 作 


认 于 过 所 问 是 


吕 更 多 信息 


图 4.11 以 get 方法 提交 信息 


采用 get 方法 提交 表单 信息 之 后 ， 在 浏览 器 的 地 址 栏 中 ，URL 信息 会 发 生变 化 。 仔 细 
观察 不 难 发 现 ， 在 URL 信息 中 清晰 地 显示 出 表单 提交 的 数据 内 容 ， 即 刚刚 输入 的 用 户 名 
和 地 址 都 完全 显示 在 地 址 栏 中 ， 清 晰 可 见 。 
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通过 对 比 图 4.10 和 图 4.11 的 效果 ， 可 以 发 现 两 种 提交 方式 之 间 的 区 别 如 下 。 

《1) 使 用 post 方法 不 会 改变 地 址 栏 状态 ， 表 单数 据 不 会 被 显示 。 
。 | (2) 使 用 get 方法 ， 地 址 栏 状 态 会 发 生变 化 ， 表 单数 据 会 在 URL 信息 中 显示 。 
| 基于 以 上 两 点 区 别 ，post 方法 提交 的 数据 安全 性 要 明显 高 于 get 方法 提交 的 数据 。 在 
> 日常 开 发 中 ， 建 议 尽 可 能 地 采用 post 方法 来 提交 表单 数据 。 

















Note | 
4.12 添加 重 置 按钮 


重 置 按 钮 又 叫 复 位 按钮 ， 用 来 重 置 表单 中 输入 的 信息 ， 语 法 如 下 

<input type="reset" name=" value="/> 
| 其 中 ,type='"reset" 定义 重 置 按钮 ; name 属性 定义 重 置 按钮 的 名 称 ; value 属性 定义 按 
| 钮 的 显示 文字 。 代 码 如 示例 4.9 所 示 。 
| 示例 49: 


<!DOCTYPE html> 
<html lang="en'"> 
! <head> 
| <meta charset="UTF-8"> 
| <title>Title</title> 
</head> 
<body> 
<form> 
请 输入 用 户 名 称 : 
<input type="text"/> 
<br/> 
请 输入 用 户 密码 : 
<input type="password"/> 
<br /> 
<input type="submit" value=" 登 录 "/> 
<input type="reset" value=" 重 置 "/> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.12 所 示 。 





关 intemet | 器 六 合式 基 丰 > R150% ~ 


图 4.12 重 置 按钮 
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4.13 ”添加 文件 域 














文件 域 的 作用 是 用 于 实现 文件 的 选择 ， 在 应 用 时 只 需 把 type 属性 设 为 fle 即 可 。 在 
实际 应 用 中 ， 文 件 域 通常 应 用 于 文件 上 传 的 操作 ， 如 选择 需要 上 传 的 文本 、 图 片 等 。 语 
法 如 下 

<input type="file" name="files" /> | 
其 中 ，type="file" 定义 文件 按钮 ，name 属性 定义 文件 按钮 的 名 称 。 代 码 如 示例 410 | 























所 示 
示例 4.10: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<form action="" method="post" enctype="multipart/form-data"> 
<p><input type="file" name="files" /><br/> 
<input type="submit" name="upload" value=" 上传" /></p> 
</form> 
</body> 
</html> 


在 浏览 器 中 的 效果 如 图 4.13 所 示 。 
全 Tie- Windows mtemet Expl. 
合 司 "图 htpyWlocahost - [BI + IX|[P a 


高 收藏 夫 将 合 ] 建 议 网 站 舍 ] 网 页 快讯 库 了 
STitle 芥 ~ 





» 














| 急 Internet | 保护 模式 :禁用 全 > 芭 150% ~ 
图 4.13 文件 域 


如 图 4.13 所 示 ， 文 件 域 会 创建 一 个 不 能 输入 内 容 的 地 址 文本 框 和 一 个 “浏览 ”按钮 。 | 
单 击 “ 浏 览 ” 按 钮 ， 将 会 弹出 “选择 要 加 载 的 文件 ”对 话 框 ， 选 择 文件 后 ， 其 路 径 将 显示 | 
在 地 址 文本 框 中 ， 执 行 的 效果 如 图 4.14 所 示 。 | 

在 使 用 文件 域 时 ， 需 要 特别 注意 的 是 ， 包 含 文件 域 的 表单 ， 由 于 提交 的 表单 数据 包括 | 
普通 的 表单 数据 、 文 件数 据 等 多 部 分 内 容 ， 所 以 必须 设置 表单 的 enctype 编码 属性 为 | 
multipart/form-data， 表 示 将 表单 数据 分 为 多 部 分 提交 。 
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图 4.14 文件 域 和 上 传 操作 
4.14 技能 训练 


1. 制作 李 元 德 国画 网 

需求 说 明 : 

(1) 制作 如 图 4.15 所 示 的 网 站 注册 页 面 。 

(2) 注册 邮箱 、 姓 名 最 多 能 容纳 的 字符 数 分 别 是 50、8。 
(3) 提交 按钮 使 用 素材 中 提供 的 图 片 代替 。 

2. 制作 网 站 注册 页 面 

需求 说 明 : 

| (1) 制作 如 图 4.16 所 示 的 网 站 注册 页 面 。 

| (2) 注册 邮箱 、 密 码 、 姓 名 和 验证 码 最 多 能 容纳 的 字符 数 分 别 是 50、16、8 和 5。 
| (3) 默认 情况 下 ， 性 别 中 的 “ 男 ” 处 于 选中 状态 。 

(4) 提交 按钮 使 用 素材 中 提供 的 图 片 代替 。 











妈 名 ， 
人 ,大 
出 生年 月 ， 
注册 罕 码 ， 
确认 窗 友 ， 
电 了 好 伯 ， 
手机 
国定 电话 
爱好 ,日 体育 日 音 和 日 上 觉 
有 = 
全 本 
图 4.15 “ 李 元 德 国画 网 图 4.16 网 站 注册 页 面 
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表单 的 应 用 场景 登录、 注册 页 面 以 及 一 些 收集 信息 的 页 面 。 天 内 
表单 的 结构 和 包含 的 内 容 ， 文 本 输入 框 、 密 码 框 、 单 选 按钮 、 复 读 杠 和 提交 按 加 
钮 等 。 

表单 元 素 的 只 读 属性 和 禁用 属性 分 别 用 readonly 和 disabled 来 表示 ， 属性 值 和 属 

性 名 相同 。 

江北 的 车 构 人 得 页 面 更 加 合理 ， 代 到 更加 人 清 ， 问 时 也 符合 W3C 的 wb 开 必 | 

标准 。 
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了 
初 识 CSS 


本 章 简介 


无 规则 不 成 方圆 ， 在 制作 网 页 时 则 要 遵循 W3C 标准 ， 而 W3C 标准 的 核心 思想 就 是 
表现 与 内 容 分 离 ， 也 就 是 HTML 负责 内 容 ，CSS 负责 外 观 样式 表现 。 到 目前 为 止 ， 通 过 
前 面 的 内 容 学 会 了 如 何 使 用 HTML 标签 组 织 内 容 结构 ， 现 在 我 们 重点 讲述 表现 样式 的 
CSS 部 分 。 

本 章 将 介绍 CSS 的 基本 概念 、CSS 选择 器 、CSS 基本 语法 ， 以 及 如 何在 网 页 中 应 用 
CSS 样式 ， 实 现 表现 与 结构 的 分 离 ， 最 后 讲解 CSS 复合 选择 器 和 CSS 的 继承 特性 。 本 章 
的 重点 是 掌握 CSS 基本 语法 、 它 的 3 种 基本 选择 器 , 以 及 在 HIML 页 面 添加 CSS 的 方式 。 


六 “制作 总 裁 致 奸 页 面 
> 制作 团队 风采 页 面 


EE 


会 使 用 CSS 的 3 种 基本 选择 器 设置 字体 大 小 和 颜色 
会 使 用 行内 样式 、 内 部 样式 表 和 外 部 样式 表 3 种 方式 为 HTML 文档 添加 CSS 样式 
会 使 用 复合 选择 器 为 特定 的 网 页 元 素 添加 CSS 样式 
理解 CSS 继承 特性 ， 并 掌握 其 在 CSS 样式 中 的 应 用 


背诵 英文 单词 


请 在 预习 时 找 出 下 列 单词 在 本 章 中 的 用 法 ， 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 


Vvyvyv 
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CSS 

Selector 

link 


font-slze 











color 
import 


| | 预习 并 回答 以 下 问题 


1. 什么 是 CSS? 

2. CSS 的 基本 语法 结构 是 什么 ? 

3. CSS 选择 器 有 哪 几 种 ? 语法 规则 是 什么 ? 
4.HTML 中 引入 CSS 样式 有 哪 几 种 方式 ? 





5.1 使 用 CSS 的 意义 


| 使 用 CSS 可 以 轻松 地 控制 页 面 的 布局 ， 使 页 面 的 字体 变 得 更 漂亮 、 更 容易 编排 ， 真 正 
| | 赏心悦目 。 通 过 CSS 可 以 将 许多 网 页 的 风格 同时 更 新 ， 不 用 再 一 页 页 的 更 新 了 。 可 
| 以 将 站 点 上 所 有 的 网 页 风格 都 使 用 一 个 CSS 文件 进行 控制 ， 只 要 修改 这 个 CSS 文件 中 
目 应 的 样式 ， 那 么 整个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 

| 如 图 5.1 所 示 为 人 人 网 的 注册 页 面 ， 使 用 前 面 学 习 过 的 知识 能 实现 这 样 的 页 面 效 果 
| 吗 ? 当然 不 能 , 单纯 使 用 HTML 标签 是 不 能 实现 的 , 如 果 要 实现 这 样 精美 的 网 页 就 需要 借 
| 助 于 CSS。 








| 
| MA 人 A 网 注册 新 帐号 加 入 人 人 网 


口 Em 





图 5.1 人 人 网 注册 页 面 


通过 上 面 展 示 的 页 面 , 大 家 已 经 大 致 了 解 了 CSS 的 作用 了 , 那么 再 看 如 图 5.2 和 图 5.3 
两 个 页 面 ， 看 看 这 两 个 页 面 有 什么 区 别 。 

想必 大 家 已 经 看 出 来 了 ， 图 5.3 非常 杂乱 ， 看 不 出 来 页 面 想 要 表达 的 内 容 ; 而 图 5.2 
的 页 面 非常 清晰 、 美 观 ， 能 够 一 眼看 出 此 页 面 的 结构 、 内 容 模块 ， 以 及 页 面 表达 的 内 容 。 
| 这 就 是 页 面 使 用 了 CSS 和 没有 使 用 CSS 的 效果 对 比 。 
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一 馆 安 装 己 要 过 百 版 ,释义 更 得 储 , 速度 快 三 倍 ! 


第 D 章 初 视 CSS 5 河 


音 司 


iCIBA 。 吾 司 。 盔 详 人工 惑 译 在 持 课 誉 发 现 。 育 羊 词 词 要 下 载 等 日 英 洁 四 六 级 召 层 每 日 鞠 洁 四 六 级 课 在 


免 要 订阅 Hi-English 电 子孙 志 > > - 至 持 每 天 3 分 名 , 一 个 月 后 大 不 同 .坚持 本 





图 5.2 添加 CSS 样式 的 页 面 效果 


一 雪 安 装 司 莽 训 面 版 ， 在 义 更 痛 准 ， 适度 快 三 倍 ! 


免 村 订阅 Hi-Engllsh 司 子 邓 二 >> . 坚持 笨 天 3 分 钟 ,一 个 月 后 大 不 同 坚 兰 入 天 3 种 , 一 个 月 后 大 不 同 





图 5.3 没有 CSS 样式 的 效果 
到 了 这 里 ， 大 家 会 问 ， 既 然 CSS 这 么 重要 ， 那 么 什么 是 CSS 呢 ? 


5.1.1 什么 是 CSS 


CSS 全 称 为 层 登 样式 表 (Cascading Style Sheet), 通常 又 称 为 风格 样式 表 (Style SheeD，， 
它 是 用 来 进行 网 页 风格 设计 的 。 要 想 熟 练 地 使 用 CSS 对 网 页 美化 ， 也 必须 要 了 解 CSS 规 | 
则 。 例 如 ， 在 上 面 的 例子 中 ， 页 面 下 面部 分 的 图 片 和 文本 使 用 了 CSS 规则 混 排 效 果 ， 非 常 | 
漂亮 ， 并 且 很 清晰 ， 这 就 是 一 种 风格 。 下 面 我 们 就 来 了 解 CSS 的 规则 。 


5.1.2 CSS 在 网 页 中 的 应 用 


既然 CSS 可 以 设计 网 页 风格 ， 那 么 在 网 页 中 ，CSS 如 何 应 用 呢 ? 通过 建立 样式 表 , 可 ， 
以 统一 控制 HTML 中 每 个 标签 的 显示 属性 ， 如 设置 字体 的 颜色 、 大 小 、 样 式 等 ， 还 可 以 设 
置 文本 居中 显示 、 文 本 与 图 片 的 对 齐 方式 、 超 链接 的 不 同 效果 等 ， 这 样 CSS 就 可 以 更 有 效 | 
地 控制 网 页 外 观 。 
使 用 CSS， 还 可 以 精确 地 定位 网 页 元 素 的 位 置 ， 美化 网 页 外 观 ， 如 图 54 和 图 5.5 所 示 。 
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国 。 天 狂 。 习 划 质 。 天 澳 超 币 。 沟 抬 网 “电器 城 司法 拍 责 ”中 国 质 意 将 色 中 国 。 网 里 该 行 习 衣 生 活 苏宁 吻 购 








5.1.3 CSS 的 优势 








| CSS 对 网 页 制作 这 么 重要 ， 那 么 使 用 CSS 制作 网 页 还 有 什么 好 处 呢 ? 下 面 列举 使 
| css 的 优势 。 

| (1) 丰富 的 样式 ， 使 得 页 面 布局 更 加 灵活 。 

| (2) 内 容 与 表现 分 离 , 也 就 是 说 使 用 HTML 语言 制作 网 页 , 使 用 CSS 设置 网 页 样式 、 
| 风格 ， 并 且 CSS 样式 单独 存放 在 一 个 文件 中 ， 这 样 HTML 文件 引用 CSS 文件 就 可 以 了 。 
| 网 页 的 内 容 (XHTML) 与 表现 就 可 以 分 开 了 ， 便 于 后 期 的 CSS 样式 的 维护 。 
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(3) 表现 的 统一 ， 可 以 使 网 页 的 表现 非常 统一 ， 并 且 容易 修改 。 把 CSS 写 在 单独 的 | 
页 面 中 ， 可 以 对 多 个 网 页 应 用 其 样式 ， 使 网 站 中 的 所 有 页 面 表 现 、 风 格 统一 ， 在 需要 修改 
页 面 的 表现 形式 时 ， 只 需要 修改 CSS 样式 ， 所 有 的 页 面 样式 就 同时 修改 。 | 
(4) 运用 独立 于 页 面 的 CSS， 还 有 利于 网 页 被 搜索 引擎 收录 。 | 全 站 
(5) 减少 网 页 的 代码 量 , 增加 网 页 的 浏览 速度 ， 节 省 网 络 带宽 。 在 网 页 中 只 写 HIML ， 
代码 ， 在 CSS 中 编写 样式 ， 这 样 可 以 减少 页 面 代码 量 ， 并 且 页 面 代码 清晰 。 同 时 ， 合理 的 | Note 
CSS 还 能 有 效 地 节省 网 络 带宽 ， 提 高 用 户 体验 。 | 
(6) 运用 独立 于 页 面 的 CSS， 还 有 利于 网 页 被 搜索 引擎 收录 。 
CSS 的 使 用 优点 不 只 局 限于 以 上 几 点 ， 更 多 的 优势 需要 在 网 页 制作 过 程 中 慢 慢 体会 。 
下 面 开始 学 习 本 章 的 重点 内 容 4 基本 语法 。 


























5.2 CSS 的 基本 语法 


学 习 CSS， 首 先 要 学 习 它 的 语法 ， 以 及 如 何 把 它 与 HTML 联系 起 来 ， 达 到 布局 网 页 、 
美化 页 面 的 效果 。 下 面 就 来 学 习 CSS 的 语法 结构 和 如 何在 页 面 中 应 用 CSS 样式 。 


5.2.1 CSS 语法 


CSS 样式 规则 由 两 部 分 构成 ， 即 选择 器 和 声明 。 声 明 必须 放 在 大 括号 { } 中 ， 并且 声 明 
可 以 是 一 条 或 多 条 ; 每 条 声明 由 一 个 属性 和 值 组 成 ， 属 性 和 值 用 冒号 分 开 ， 每 条 语句 以 英 | 
文 分 号 结尾 。 规 则 声明 了 要 修改 的 元 素 和 要 应 用 给 该 元 素 的 样式 。 语 法 如 下 : | 
选择 器 {属性 1: 属 性 值 1 ;属性 2: 属 性 值 2; 属 性 3: 属 性 值 3;} 


如 图 5.6 所 示 ，hl 表示 选择 器 ;“font-size:12px;” 和 “color: 诈 00;:” 表 示 两 条 声明 ， 声 
明 中 font-size 和 color 表示 属性 ，12px 和 #00 则 表示 相对 应 的 属性 值 。 
选择 器 


加 | 


属性 值 


font-size: 12px 





color:#F00 \ 
} a 
属性 值 


声明 
图 5.6 CSS 语法 基本 结构 


这 条 规则 声明 了 <hl> 标 签 的 字体 大 小 为 12px， 颜 色 为 红色 。 
5.2.2 ”认识 <style> 标 签 | 
CSS 样式 是 通过 <style> 标 签 嵌 入 到 页 面 中 的 。<style> 标 签 会 告诉 浏览 器 <style> 标 签 中 
的 所 有 代码 解释 为 CSS 代码 ; 标签 结束 时 ， 再 转换 为 HIML 代码 。 学 习 了 CSS 基本 语法 
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| 结构 ， 学 会 了 如 何 定义 CSS 样式 ， 那 么 ， 如 何 将 定义 好 的 CSS 应 用 到 页 面 中 去 呢 ? 

| 在 HIML 页 面 的 <head> 标 签 中 填写 <style> 标 签 引入 CSS 样式 ， 它 规定 浏览 器 中 如 何 
| 呈现 HTML 文档 。 在 <style> 标 签 中 ，type 属性 是 必需 的 ， 它 用 来 定义 style 元 素 的 内 容 ， 

| 唯一 值 是 texvcss，CSS 的 链接 方式 如 图 5.7 所 示 。 
























图 5.7 <style> 标 签 的 应 用 


掌握 了 如 何在 HTML 中 编辑 CSS 样式 ， 那 么 如 何 把 样式 应 用 到 HTML 标签 中 呢 ? 这 
就 需要 用 到 CSS 中 的 选择 器 了 。 


5.2.3 CSS 选择 器 


CSS 主要 的 作用 就 是 给 网 页 中 的 DOM 元 素 设置 样式 ， 选 择 器 则 是 用 来 匹配 DOM 元 
素 的 。 
| 选择 器 (Selector) 是 CSS 中 非常 重要 的 概念 ， 所 有 HTML 标签 都 是 通过 不 同 的 CSS 
| 选择 器 进行 控制 的 。 用 户 只 需要 通过 选择 器 , 就 可 以 对 不 同 的 HTML 标签 进行 选择 ， 并 赋 
| 予 各 种 各 样 的 样式 声明 ， 即 可 以 实现 各 种 美化 网 页 效果 。 

在 CSS 中 最 基本 的 选择 器 分 别 是 标签 选择 器 、 类 选择 器 和 ID 选择 器 3 种 ， 下 面 分 别 
进行 详细 介绍 。 
1， 标签 选择 器 
一 个 HTML 页 面 由 很 多 标签 组 成 ， 如 <hl> 一 <h6>、<p> 和 <img> 等 ，CSS 标签 选择 器 
就 是 用 来 声明 这 些 标签 的 。 因 此 , 每 种 HTML 标签 的 名 称 都 可 以 作为 相应 的 标签 选择 器 的 
名 称 。 例 如 ，<h3> 标 签 选择 器 就 用 于 声明 页 面 中 所 有 <h3> 标 签 的 样式 风格 ; 同样 ， 可 以 
通过 <p> 标 签 选择 器 来 声明 页 面 中 所 有 <p> 标 签 的 样式 风格 。 示 例 5.1 声明 了 <h3> 和 <p> 
| 标签 选择 器 。 
| 示例 5.1; 
<!DOCTYPE html> 
<html lang="en"> 

<head> 


<meta charset="UTF-8"> 
<title>Title</title> 
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<style type= "text/css"> 
h3 {font-weight:bold:} 
p{ 
font-size:16px; 


font-style:italic: 仿 7 
} Was 


</style> | 
a 


<body> 
<h3> 新 迈 尔 科技 有 限 公司 </h3> 
<p> 位 于 北京 市 海淀 区 中 关 村 软件 园 二 期 中 兴 通 大 厦 B 座 三 层 301 室 </p> 
<p> 欢 迎 来 到 新 迈 尔 科技 <p> 
</body> 
</html> | 
示例 5.1 中 CSS 代码 声明 了 HTML 页 面 中 所 有 的 <h3> 标 签 和 <p> 标 签 。<h3> 标 签 中 字 ， 
体 为 粗 体 ，<p> 标 签 中 字体 为 斜体 ， 大 小 都 为 16px。 每 个 CSS 选择 器 都 包含 选择 器 本 身 、 | 
属性 和 值 , 其 中 , 属性 和 值 可 以 设置 多 个 , 从 而 实现 对 同一 个 标签 声明 多 种 样式 风格 , CSS ， 
标签 选择 器 的 语法 结构 如 图 5.8 所 示 。 在 浏览 器 中 打开 页 面 ， 效 果 如 图 5.9 所 示 ， 标 题字 | 
体 为 粗 体 ; 文本 字体 为 斜体 ， 并且 字体 大 小 为 16px。 从 页 面 效 果 图 中 可 以 看 到 ， 标 维和 | 
器 声明 之 后 ， 立 即 对 HTML 中 的 标签 产生 作用 。 
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标签 选择 器 属性。 值 


pl font-size: 16px: } 


NL 标签 声明 





图 5.8 ”标签 选择 器 图 5.9 标签 选择 器 效果 图 


标签 选择 器 是 网 页 样式 中 经 常用 到 的 ， 通 常用 于 直接 设置 页 面 中 的 标签 样式 。 例 如 ， | 
页 面 中 有 <hl>、<h4> 和 <p> 标 签 ， 如 果 相 同 的 标签 内 容 的 样式 一 致 ， 那 么 使 用 标签 选择 器 | 
就 非常 方便 了 。 | 


2. 类 选择 器 


通过 上 文 的 介绍 可 以 知道 ， 标 签 选择 器 一 旦 声明 ， 页 面 中 所 有 的 该 标签 都 会 相应 地 发 | 
生变 化 。 例 如 ， 当 声明 了 <p> 标 签 都 为 斜体 时 ， 页 面 中 所 有 的 <p> 标 签 都 将 显示 为 斜体 。 但 | 
是 ， 如 果 和 希望 其 中 的 某 个 <p> 标 签 不 是 斜体 ， 而 是 加 粗 ， 那 么 仅 依 
靠 标签 选择 器 是 不 够 的 ， 还 需要 引入 类 (class) 选择 器 。 类 选择 器 。 属性 | 
类 选择 器 的 名 称 可 以 由 用 户 自 定 义 ， 属 性 和 值 与 标签 选择 器 一 
样 ， 必 须 符 合 CSS 规范 ， 类 选择 器 的 语法 结构 如 图 5.10 所 示 。 
设置 了 类 选择 器 后 , 就 要 在 HTML 标签 中 应 用 类 样式 。 使 用 标 | 将 殊 明 
签 的 class 属性 引用 类 样式 , 即 引 用 格式 为 < 标签 名 class=" 类 名 称 "> 图 5.10 类 选择 器 


-calss{ font-size:16px; }| | 
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| 标签 内 容 </ 标 签名 >。 
| 例如， 要 使 示例 5.1 中 的 两 个 <p> 标 签 中 的 文本 分 别 显示 不 同 的 颜色 ， 就 可 以 通过 设 
， | 置 不 同 的 类 选择 器 来 实现 。 代 码 如 示例 5.2 所 示 ， 增 加 了 green 类 样式 ， 并 在 <p> 标 签 中 使 
| 用 elass 属性 应 用 了 该 类 样式 。 


| 示例 5.2: 
| <!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
h3 {font-weight:bold: } 
pt 
font-size:16px; 
font-style:italic; 


} 
.bold{ 
font-size:20px; 
font-weight:bold; 


} 
</style> 
| </head> 
| <body> 
| <h3> 新 迈 尔 科技 有 限 公司 </h3> 
<p> 位 于 北京 市 海淀 区 中 关 村 软件 园 二 期 中 兴 通 大 厦 B 座 三 层 301 室 </p> 
<p class="bold"> 欢 迎 来 到 新 迈 尔 科技 </p> 
</body> 
</html> 


| 在 浏览 器 中 打开 页 面 ， 效 果 如 图 5.11 所 示 。 由 于 第 二 个 <p> 标 签 应 用 了 类 样式 green， 
| 它 的 文本 字体 变 为 粗 体 ， 并 且 字 体 大 小 为 20px; 而 由 于 第 一 个 <p> 标 签 没有 应 用 类 样式 ， 
| 因此 它 直接 使 用 标签 选择 器 ， 字 体 依然 是 斜体 ， 字 体 大 小 为 16px。 
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从 于 龙 京 坟 峰 眠 区 闪光 记 藉 基 胃 二 娠 几 具 证 大 大 8 座 三 层 701 富 
层 辑 半 到 新 近 尔 群 花 


图 5.11 类 选择 器 效果 图 
| 类 选择 器 是 网 页 中 最 常用 的 一 种 选择 器 ， 设 置 了 一 个 类 选择 器 后 ， 只 要 页 面 的 某 个 标 
| 签 中 需要 相同 的 样式 ， 直 接 使 用 class 属性 调用 即 可 。 类 选择 器 可 以 在 同一 个 页 面 中 频繁 
| 地 使 用 ， 非 常 方便 。 
| 3.ID 选择 器 
ID 选择 器 的 使 用 方法 与 类 选择 器 基本 相同 , 不 同 之 处 在 于 ID 选择 器 只 能 在 HTML 页 
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面 中 使 用 一 次 , 因此 它 的 针对 性 更 强 。 在 HTML 的 标签 中 ， 只 要 在 
HTML 中 设置 了 id 属性 , 就 可 以 直接 调用 CSS 中 的 ID 选择 器 。 ID 
选择 器 的 语法 结构 如 图 512 所 示 。 #1id{ font-size:16px; } | 

下 面 举 一 个 例子 看 看 ID 选择 器 在 网 页 中 的 应 用 。 设 置 两 个 id ds 其 | 全 7 














属性 ， 分 别 为 first 和 second， 在 样式 表 中 设置 两 个 ID 选择 器 ， 代 | 
码 如 示例 5.3 所 示 。 图 512 D 选 择 器 


示例 5.3: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
#first{font-size: 16px:} 
#second {font-size: 24px:} 
</style> 
</head> 


<| 


<h1> 静 夜 思 </hl> 

<p id="first"> 床 前 明月 光 ，</p> 
<p id="second"> 疑 是 地 上 霜 。</p> 
<p> 举 头 望 明 月 ，</p> 
<p> 低 头 思 故 乡 。</p> 


在 浏览 器 中 打开 的 页 面 效 果 如 图 5.13 所 示 ， 第 一 个 <p> 标 签 
设置 了 id 为 first， 字 体 大 小 为 16px; 第 二 个 <p> 标 签 设置 了 id 为 | 



































second， 字 体 大 小 为 4px。 由 此 例子 可 以 看 到 ， 只 要 在 HIML 标 

签 中 设置 了 id 属性 ,那么 此 标签 就 可 以 直接 使 用 CSS 中 对 应 的 ID ， 

床 前 明月 光 ， 选择 器 。 | 
颖 是 地 上 涯 。 与 类 选择 器 不 同 ， 尽 管 同 一 个 id 属性 在 同一 个 页 面 中 只 能 使 | 

| san. 用 一 次 ， 但 是 ID 选择 器 在 网 页 中 也 是 经 常用 到 的 。 例 如 ， 在 布局 ， 
Te 网 页 时 ， 页 头 、 页 面 主体 、 页 尾 或 者 页 面 中 的 菜单 、 列 表 等 通常 
图 513 了 选择 器 效果 图 “使 用 这 属性 ， 这 样 看 到 这 名 称 就 知道 此 部 分 的 内 容 ， 使 页 面 代码 ， 
具有 非常 高 的 可 读 性 。 


5.3 在 HTML 中 引用 CSS 样式 





在 前 面 的 几 个 示例 中 ,所 有 的 CSS 样式 都 是 通过 <style> 标 签 放 在 HTML 页 面 的 <head> 
标签 中 ， 这 样 写 会 使 页 面 的 代码 很 长 ， 不 利于 查看 和 查找 ， 不 适合 制作 网 页 。 在 HIML | 
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中 引入 CSS 样式 的 方法 有 行内 样式 、 内 部 样式 表 和 外 部 样式 表 3 种 ， 下 面 依 次 学 习 各 种 应 
| 用 方式 的 优 缺 点 及 应 用 场景 。 


5.3.1 行内 样式 


行内 样式 就 是 在 HTML 标签 中 直接 使 用 style 属性 设置 CSS 样式 。style 属性 提供 了 一 
| 种 改变 所 有 HTML 元 素 样式 的 通用 方法 。 语 法 如 下 : 

| <hl style="color:red:">style 属性 的 应 用 </h1> 

<p style="font-size:14px; color:green:"> 直 接 在 HTML 标签 中 设置 的 样式 </p> 

| 使 用 style 属性 设置 CSS 样式 仅 对 当前 的 HTML 标签 起 作用 , 并 且 是 写 在 HTML 标签 
| 中 的 ， 不 能 使 内 容 与 表现 相 分 离 ， 本 质 上 没有 体现 出 CSS 的 优势 ， 因 此 不 推荐 使 用 。 


5.3.2 ”内 部 样式 表 


| 与 前 面 讲 到 的 所 有 示例 一 样 ， 把 CSS 代码 写 在 <head> 的 <style> 标 签 中 ， 与 HTML 内 
| 容 位 于 同一 个 HTML 文件 中 ， 这 就 是 内 部 样式 表 。 

| 这 种 方式 方便 在 同 页 面 中 修改 样式 ， 但 不 利于 在 多 页 面 间 共 享 复 用 代码 及 维护 ， 对 内 
| 容 与 样式 的 分 离 也 不 够 彻底 。 实 际 开发 时 ， 会 在 页 面 开发 结束 后 ， 将 这 些 样式 代码 保存 到 
| 单独 的 CSS 文件 中 ， 将 样式 和 内 容 彻底 分 离开 ， 即 下 面 介绍 的 外 部 样式 表 。 


| 533 外 部 样式 表 


| 外 部 样式 表 是 把 CSS 代码 保存 为 一 个 单独 的 样式 表 文 件 ， 文 件 扩展 名 为 .css， 然 后 在 
| 页 面 中 引用 外 部 样式 表 即 可 。HTML 文件 引用 外 部 样式 表 有 两 种 方式 ,分 别 是 链接 式 和 导 
| 入 式 。 

| 1 链接 外 部 样式 表 

| ”链接 外 部 样式 表 就 是 在 HTML 页 面 中 使 用 <link> 标 签 链接 外 部 样式 表 ， 这 个 <link> 标 
| 签 必 须 放 到 页 面 的 <head> 标 签 内 ， 语 法 如 下 ; 








| 其 中 ，rel="stylesheet" 是 指 在 页 面 中 使 用 这 个 外 部 样式 表 ; type="text/css" 是 指 文件 的 
| 类 型 是 样式 表 文 本 ，hre 人 "style.css" 是 文件 所 在 的 位 置 。 

| 外 部 样式 表 实 现 了 样式 和 结构 的 彻底 分 离 ， 一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 
| 面 。 当 改变 这 个 样式 表 文 件 时 ， 所 有 页 面 的 样式 都 会 随 之 改变 。 这 在 制作 大 量 相同 样式 页 
| 面 的 网 站 时 非常 有 用 ， 不 仅 减少 了 重复 的 工作 量 ， 利 于 保持 网 站 的 统一 样式 和 网 站 维护 ， 
| 同时 用 户 在 浏览 网 页 时 也 减少 了 重复 下 载 代 码 ， 提 高 了 网 站 的 速度 。 

| 现在 把 示例 5.3 的 内 部 样式 表 改 变 为 外 部 样式 表 的 引用 方式 ， 步 又 如 示例 5.4 所 示 。 
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示例 5.4: 
(1) 把 页 面 中 的 CSS 代码 单独 保存 在 CSS 文件 夹 下 的 common.css 样式 表 文 件 中 ， 
文件 代码 如 下 。 在 CSS 文件 中 不 需要 <style> 标 签 ， 直 接 编 写 样式 即 可 。 


#first{font-size:16px:} | 鲜 J 
#second {font-size:24px;} | 


(2) 在 HIML 文件 中 使 用 <link> 标 签 引用 common.css 样式 表 文 件 ， 代 码 如 下 所 示 。 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link href="css/common.css" rel="stylesheet" type="text/css"/> 
</head> 
< 
<hl> 静 夜 思 </h1> 
<p id="first"> 床 前 明月 光 ，</p> 
<p id="second"> 疑 是 地 上 霜 。</p> 
<p> 举 头 望 明 月 ，</p> 
<p> 低 头 思 故 乡 。</p> 
</body> 
</html> 


使 用 链接 外 部 样式 表 的 方式 与 示例 5.3 的 内 部 样式 表 一 样 ， 在 浏览 器 中 打开 页 面 显示 

的 效果 与 示例 5.3 的 效果 一 样 ， 这 里 不 再 重新 展示 。 | 
2. 导入 外 部 样式 表 | 
导入 外 部 样式 表 就 是 在 HTML 网 页 中 使 用 @import 导入 外 部 样式 表 , 导入 样式 表 的 语 

句 必须 放 在 <style> 标 签 中 ， 而 <style> 标 签 必 须 放 到 页 面 的 <head> 标 签 内 ， 语 法 如 下 : | 
<head> 
































<style type="text/css"> 


<!-- 


@import url("style.css"): 
--> 


</style> 
</head> | 
其 中 ，@import 表示 导入 文件 ， 前 面 必须 有 一 个 @ 符 号 ，url("style.css") 表 示 样式 表 文 | 
件 位 置 。 示 例 5.4 中 改 为 使 用 @import 导入 文件 ， 代 码 如 下 所 示 。 
<head> 


<style type="text/css"> 
<!-- 


(import url("css/common.css"): 


-> 
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3. 链接 式 与 导入 式 的 区 别 
以 上 讲解 了 两 种 引用 外 部 样式 表 的 方式 , 它们 的 本 质 都 是 将 一 个 独立 的 CSS 样式 表 引 
到 HTML 页 面 中 ， 但 是 两 者 还 是 有 一 些 差别 的 ， 现 在 看 一 下 两 者 的 不 同 之 处 。 

(1) <link> 标 签 属于 XHTML 范畴 ， 而 @import 是 CSS2.1 中 特有 的 。 

(2) 使 用 <link> 链 接 的 CSS 是 客户 端 浏览 网 页 时 先 将 外 部 CSS 文件 加 载 到 网 页 当中 
再 进行 编译 显示 ， 所 以 这 种 情况 下 显示 出 来 的 网 页 与 用 户 预 期 的 效果 一 样 ， 即 使 网 速 再 慢 
也 是 一 样 的 效果 。 

(3) 使 用 @import 导入 的 CSS 文件 , 客户 端 在 浏览 网 页 时 先 将 HTML 结构 呈现 出 来 ， 
再 把 外 部 CSS 文件 加 载 到 网 页 当中 ， 当 然 最 终 的 效果 也 与 使 用 <link> 链 接 文件 效果 一 样 ， 
只 是 当 网 速 较 慢 时 会 先 显示 没有 CSS 统一 布局 的 HTML 网 页 ， 这 样 就 会 给 用 户 很 不 好 的 
感觉 。 这 也 是 目前 大 多 数 网 站 采用 链接 外 部 样式 表 的 主要 原因 。 

(4) 由 于 @import 是 CSS2.1 中 特有 的 ， 因 此 对 于 不 兼容 CSS2.1 的 浏览 器 来 说 就 是 
无 效 的 。 

综合 以 上 几 个 方面 的 因素 ， 可 以 发 现 ， 现 在 大 多 数 网 站 还 是 比较 喜欢 使 用 链接 外 部 样 
式 表 的 方式 引用 外 部 CSS 文件 。 


5.3.4 CSS 样式 的 优先 级 


前 面 一 开始 就 提 到 CSS 的 全 称 为 层 登 样式 表 , 因此 对 于 页 面 中 的 某 个 元 素 , 它 允 许 同 
时 应 用 多 个 样式 〈 即 县 加 )， 页 面 元 素 最 终 的 样式 即 为 多 个 样式 的 县 加 效果 。 但 这 存在 一 
个 问题 一 一 当 同 时 应 用 上 述 的 3 类 样式 时 ， 页 面 元 素 将 同时 继承 这 些 样式 ， 但 样式 之 间 如 
有 冲突 ， 应 继承 哪 种 样式 ? 这 就 存在 样式 优先 级 的 问题 。 同 理 ， 从 选择 器 角度 ， 当 某 个 元 
素 同时 应 用 标签 选择 器 、ID 选择 器 、 类 选择 器 定义 的 样式 时 ， 也 存在 样式 优先 级 的 问题 。 
CSS 中 规定 的 优先 级 规则 如 下 所 示 。 

回 ”行内 样式 > 内 部 样式 表 > 外 部 样式 表 。 

回 了 选择 器 > 类 选择 器 > 标签 选择 器 。 

行内 样式 > 内 部 样式 表 > 外 部 样式 表 ， 即 “就 近 原 则 ”。 如 果 同 一 个 选择 器 中 样式 声明 























| 层 合 ， 那 么 后 写 的 会 履 盖 先 写 的 样式 ， 即 后 写 的 样式 优先 于 先 写 的 样式 。 


5.4 CSS 的 高 级 应 用 





前 面 介绍 了 CSS 的 基本 语法 、CSS 的 选择 器 ， 以 及 如 何在 网 页 中 引用 CSS 样式 ， 

















最 后 还 介绍 了 样式 的 优先 级 ， 其 实 这 些 只 是 CSS 应 用 中 的 一 部 分 。 下 面 介 绍 CSS 在 网 
| 页 中 的 一 些 高 级 应 用 ， 即 CSS 复合 选择 器 和 CSS 的 继承 特性 。 
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5.4.1 CSS 复合 选择 器 


CSS 复合 选择 器 是 以 标签 选择 器 、 关 选择 器 、ID 选择 器 这 3 种 基本 选择 器 为 基础 , 通 
过 不 同方 式 将 两 个 或 多 个 选择 器 组 台 在 一 起 而 形成 的 选择 器 。 这 些 复合 而 成 的 选择 器 , 能 | 全 册 
实现 更 强 、 更 方便 的 选择 功能 。 在 网 页 布局 和 实现 页 面 的 精美 效果 时 ， 通 常会 应 用 这 些 复 | 
合 选择 器 。 复 合 选择 器 分 为 后 代 选择 器 、 交 集 选择 器 和 并 集 选择 器 。 
1， 后代 选择 器 


在 HTML 中 经 常 有 标签 的 嵌 套 使 用 ,那么 在 CSS 选择 器 中 也 可 以 通过 嵌 套 的 方式 ， 
对 特殊 位 置 的 HTML 标签 进行 声明 。 例 如 ， 当 <h3></h3> 标 签 之 间 包 含 <span></span> | 
标签 时 ， 就 可 以 通过 <h3> 标 签 来 改变 <span> 标 签 的 样式 。 

后 代 选 择 器 的 写法 就 是 把 外 层 的 标签 写 在 前 面 ， 内 层 的 标签 写 在 后 面 ， 之 间 用 空格 分 ， 
隔 。 当 标签 发 生 嵌 套 时 ， 内 层 的 标签 就 成 为 外 层 标签 的 后 代 。 

在 一 段 文字 中 ， 通 过 后 代 选 择 器 可 以 改变 最 内 层 标签 中 的 文本 的 字体 大 小 ， 代 码 如 示 | 
例 5.5 所 示 。 | 

示例 5.5: 

















<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 后 代 选 择 器 </title> 
<style type="text/css"> 
h3 span{font-weight:bold; font-size:36px:} 
span {font-style:italic: font-size:16px:} 
</style> 
</head> 
<body> 
<span> 拆 玉 妆 成 一 树 高 ，<br/> 
万 条 垂下 绿 丝 缘 。 
<h3> 不 知 细 叶 谁 裁 出 ，<br> 
<span> 二 月 春风 似 剪刀 。</span></h3> 








</span> 
</body> 
</html> | 
从 代码 中 可 以 看 到 ，<h3> 是 外 层 标签 ，<span> 是 内 层 “oe | 
标签 。 通 过 将 span 选择 器 嵌 套 在 h3 选择 器 中 进行 声明 ， | 33170017 aa 引 | 


显示 效果 只 适用 于 <h3> 和 </h3> 之 间 的 <span> 标 签 ， 而 hb3 ”有 录放 汉 

外 面 的 <span> 标 签 只 显示 对 应 的 span 标签 选择 器 效果 。 i 
在 浏览 器 中 打开 页 面 ， 效 果 如 图 5.14 所 示 ， 第 一 行 ”一 万 其 风 似 凡 四 。 

<span> 标 答 中 的 文本 字体 为 粗 体 ， 字 体 大 小 为 16px; 显然 一 

第 一 行 <span> 标 签 中 的 文本 “二 月 春风 似 彰 刀 ”按照 后 代 生生 司 代 半 玫 玖 开国 果 图 

选择 器 的 规则 显示 预期 效果 ， 字 体 为 粗 体 ， 字 体 大 小 为 36px。 
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后 代 选 择 器 在 CSS 应 用 中 是 非常 常见 的 , 通常 用 在 HTML 标签 嵌 套 时 , 常用 情况 如 下 。 
(1) 按 标签 的 能 套 关系 ， 如 本 例 中 <h3> 标 签 嵌 套 <span> 标 量 ， 直 接 按 标签 的 供 套 关 
系 编写 样式 。 
| (2) 按 选 择 器 的 嵌 套 关系 ， 如 最 外 层 的 类 选择 器 名 称 为 head， 它 里 面 蔡 套 类 选择 器 、 
ID 选择 器 ， 那 么 这 时 可 直接 按 样式 的 嵌 套 关系 编写 ， 如 .head .menu 或 .head #menu。 







(3) 按 选 择 器 的 互相 嵌 套 关系 ， 如 最 外 层 ID 选择 器 名 称 为 nav， 它 里 面 柑 套 类 选择 


| 器 和 标签 选择 器 ， 如 #mav .title 或 fmav li。 

2. 交集 选择 器 

CSS 交集 选择 器 也 叫 交集 复合 选择 器 ， 由 两 个 选择 器 直接 连接 构成 ， 其 中 第 一 个 是 标 
签 选择 器 ， 第 二 个 是 类 选择 器 或 者 ID 选择 器 。 这 两 个 选择 器 之 间 不 能 有 空格 ， 必 须 连续 
| 书写 。 
| 这 种 方式 构成 的 选择 器 ， 将 选中 同时 满足 前 后 两 者 定义 的 元 素 ， 也 就 是 前 者 所 定义 的 
| 标签 类 型 和 后 者 的 类 或 者 ID 的 元 素 ， 因 此 被 称 为 交集 选择 器 。 
| 现在 看 一 个 交集 选择 器 的 例子 。 以 杜甫 的 诗 《 春 夜 喜 雨 》 为 例 , 诗 的 所 有 内 容 写 在 <p> 
| 标签 内 ， 其 中 一 句 诗 写 在 <p> 标 签 的 嵌 套 标签 <strong> 中 ， 两 个 标签 均 加 上 类 样式 text; 两 
| 个 类 样式 text 分 别 是 后 代 选 择 器 和 交集 选择 器 ， 代 码 如 示例 5.6 所 示 。 
”示例 5.6: 











<!DOCTYPE html> 
<html lang="en'"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
Pp .text{font-weight:bold;} /# 后 代 选 择 器 9/ 
Pp.text{font-style:italic;line-height:28px:} * 交 集 选择 器 */ 
</style> 
</head> 
< 





<h2> 春 夜 喜 雨 <h2> 
<p class="text"> 
<strong class="text"> 好 雨 知 时 节 ， 当 春 乃 发 生 。 随 风 潜 入 夜 ， 润 物 细 无 声 。</strong> 
野 径 云 俱 黑 ， 江 船 火 独 明 。 晓 看 红 湿 处 ， 花 重 锦 官 城 。 
<p> 
</body> 
</html> 


| 在 浏览 器 中 的 效果 如 图 5.15 所 示 ，<p> 标 签 应 用 了 text 样式 表示 是 交集 选择 器 ， 其 中 
的 文本 为 粗 体 ; 而 <strong> 标 签 是 嵌 套 在 <p> 标 签 中 的 ， 符 合 后 代 选 择 器 的 规则 ， 因 此 它 的 
字体 显示 斜体 。 
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好 两 知 时 节 ， 当 新 乃 笑 生 . 页 网 小 | 
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黑 ， 江 般 火 独 明 。 晓 看 红 湿 处 ， 花 | 

重 锦 官 城 。 


| 
图 5.15 交集 选择 器 效果 图 





3. 并 集 选 择 器 

与 交集 选择 器 相对 应 ， 还 有 一 种 并 集 选择 器 。CSS 并 集 选 择 器 也 叫 群 选择 器 ， 是 由 多 ， 
个 选择 器 通过 去 号 连接 在 一 起 的 ， 这 些 选择 器 分 别 是 标签 选择 器 、 类 选择 器 或 JD 选择 器 。 | 
它 的 结果 是 同时 选中 多 个 基本 选择 器 所 选择 的 范围 。 

在 声明 各 种 CSS 选择 器 时 ， 如 果 某 些 选 择 器 定义 的 CSS 样式 是 完全 相同 的 ， 或 者 部 | 
分 相同 ， 这 时 便 可 以 用 并 集 选择 器 同时 声明 风格 相同 的 CSS 选择 器 。 

同样 以 杜甫 的 诗 《 春 夜 喜 雨 》 为 例 ， 把 诗词 的 每 句 放 在 不 同 的 标签 中 ， 然 后 这 些 标签 | 
设置 相同 的 样式 ， 代 码 如 示例 5.7 所 示 。 | 
示例 5.7: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
h3,.first,.second,.third {font-size:16px:; font-weight:normal:} 
</style> 
</head> 
<body> 
<h2> 春 夜 喜 雨 </h2> 
<h3> 好 雨 知 时 节 ， 当 春 乃 发 生 。</h3> 
<p class="first"> 随 风 潜入 夜 ， 润 物 细 无 声 。</p> 
<p class="second"> 时 径 云 俱 黑 ， 江 船 火 独 明 。</p> 
<p id="third"> 晓 看 红 湿 处 ， 花 重 锦 官 城 。</p> 
</body> 
</html> 


从 示例 5.7 的 代码 中 可 以 看 出 ， 第 一 句 放 在 <h3> 标 签 中 ， 其 他 3 句 均 放 在 <p> 标 签 中 ， 
但 是 分 别 引 用 不 同 的 类 选择 器 和 ID 选择 器 。 在 浏览 器 中 打开 的 页 面 效 果 如 图 5.16 所 示 , 4 | 
句 诗词 显示 的 样式 均一 样 , 这 是 因为 所 有 选择 器 设置 的 CSS 样式 都 是 一 样 的 , 这 种 集体 声 | 
明 的 并 集 选 择 器 与 分 开 一 个 一 个 声明 选择 器 的 效果 是 一 样 的 。 
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好 古 知 8f 并 ， 当 察 乃 发生。 | 
页 风采 人 夜 ， 海 苏 细 无 商 。 | 
层 在 云 估 短 ， 江 解 汪 迭 怒 . 中 
号 每 红 闷 处 ， 论 要 盘 语 姑 。 
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图 5.16 并 集 选择 器 效果 图 


在 实际 应 用 中 , 并 集 选 择 器 经 常会 用 在 对 页 面 中 所 有 标签 进行 全 局 样式 设置 上 。 例 如， 
CSS 文件 一 开始 设置 页 面 标签 的 全 局 样式 , 当 页 面 中 <p><li><df> 和 <dd> 等 标签 内 的 文本 字 


| 体 大 小 、 行 距 一 样 ， 这 时 使 用 并 集 选 择 器 集体 设置 这 些 标签 内 容 一 样 的 样式 ， 就 非常 方便 








| 了 。 这 一 点 在 后 面 的 章节 会 经 常 应 用 到 。 


掌握 了 以 上 3 种 CSS 样式 的 编写 方法 ， 在 以 后 编写 CSS 代码 时 ， 应 根据 需要 编辑 不 
同 的 选择 器 以 符合 页 面 的 需求 ， 对 CSS 代码 进行 优化 ， 对 CSS 代码 “减肥 ”， 以 加 速 客户 
端 页 面 下 载 速度 并 提高 用 户 体验 。 


5.4.2 CSS 继承 性 


所 谓 CSS 的 继承 是 指 被 包 在 内 部 的 标签 将 拥有 外 部 标签 的 样式 性 质 。 
1. 继承 关系 
CSS 的 一 个 主要 特征 就 是 继承 ， 它 是 依赖 于 祖先 -后 代 的 关系 的 。 继 承 是 一 种 机 制 ， 


| 它 多 许 样式 不 仅 可 以 应 用 于 某 个 特定 的 元 素 ， 还 可 以 应 用 于 其 后 代 。 为 了 更 好 地 理解 
| 继承 关系 ， 首 先 从 HTML 文件 的 组 织 结构 入 手 ， 代 码 如 示例 5.8 所 示 。 





示例 5.8: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<h1> 新 迈 尔 学 习 平 台 </hl> 
<p> 欢 迎 来 到 新 迈 尔 学 习 平台 ， 这 里 将 为 您 提供 丰富 的 学 习 内 容 。</p> 


<u> 
<1H> 网 页 制作 
<ul> 
<li> 使 用 Dreamweaver 制作 网 页 </li> 
<l 记 使 用 CSS 布局 和 美化 网 页 
<u> 
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<li>CSS 初级 </li> 
<li>CSS 中 级 </li> 
<li>CSS 高 级 </li> 
</ul> 
</i> 
<1i> 使 用 JavaScript 制作 网 页 特效 </i> 
</u> 
</li> 
<1li> 平 面 设计 
<ol> 
<1i> 美 术 基础 <4i> 
<1i> 使 用 Photoshop 处 理 图 形 图 像 </li> 
<1li> 使 用 Illustrator 设计 图 i 
<I 记 制作 Flash 动画 </li> 
</o> 
< 由 > 





</ul> 
<p> 如 果 您 有 任何 问题 ， 欢 迎 给 我 们 留言 。</p> 
</body> 
</html> 


在 浏览 器 中 打开 的 页 面 效 果 如 图 5.17 所 示 , 可 以 看 到 这 个 页 面 中 , 标题 使 用 了 标题 标 | 


签 ， 后 面 使 用 了 列表 结构 ， 其 中 最 深 的 部 分 使 用 了 3 级 列表 。 


这 里 着 重 从 “继承 ”的 角度 来 考虑 各 个 标签 之 间 的 树 形 关系 ， 如 图 5.18 所 示 。 在 这 个 | 
树 形 关 系 中 ， 处 于 最 上 端的 <html> 标 签 称 为 “ 根 ”(root)， 它 是 所 有 标签 的 源头 ， 往 下 层 | 
包含 。 在 每 个 分 支 中 ， 称 上 层 标 签 为 其 下 层 标签 的 “ 父 ” 标 签 ， 相应 地 ， 下 层 标 签 称 为 上 | 
层 标 签 的 “ 子 ” 标 签 。 例 如 ，<ul> 标 签 是 <body> 标 签 的 子 标 签 ， 同 时 它 也 是 <1i> 标 签 的 父 | 





标签 。 


从 Te- Up 二 
GH http//localhost 633 gE EL 

育 收 若 只 褒 引 ] 严 议 网 站 币 ] 网 页 快 及 库 

全 Title | 全 ~ 国 -" 忆 师 > > ” 








新 迈 尔 学 习 平 台 


下 人 台 ， 这 里 将 为 您 提供 丰富 的 学 习 内 





* 网 页 制作 
。 使 用 Dreamweaver 制 作 网 页 
。 使 用 CSS 布 局 和 美化 网 页 
日 CSS 初级 
里 CSS 中 级 


日 CSS 高 级 
， 使 用 JavaSeript 制 作 网 页 特效 
* 平面 设计 
1. 笑 下 到 
2. 使 用 Photoshop 处 理 图 形 图 像 
3. 使 用 Illustrator 设 计 图 形 
4 制作 Flash 动 画 


如 果 您 有 任何 问题 ， 欢 迎 给 我 们 留言 













































































疙 Intermet | 保护 相 式 :禁用 


图 5.17 CSS 继承 性 的 效果 图 图 5.18 继承 关系 结构 图 
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2. 继承 的 应 用 
通过 前 面 的 讲解 ， 已 经 对 各 个 标签 之 间 的 父子 关系 有 了 认识 ， 下 面 进一步 讲解 CSS 
y | 继承 的 应 用 。CSS 继承 指 的 是 子 标签 的 所 有 样式 风格 ， 可 以 在 父 标签 样式 风格 的 基础 上 加 
全 | ， 以 修改 ， 产 生 新 的 样式 ， 而 子 标签 的 样式 风格 完全 不 会 影响 父 标签 。 
| 例如 ， 在 示例 5.8 中 加 入 继承 关系 的 CSS 代码 ,设置 所 有 列表 的 字体 大 小 为 12px, 字 
体 为 粗 体 ;“ 使 用 CSS 布局 和 美化 网 页 ”下 一 级 列表 字体 为 斜体 ;“ 平 面 设 计 ” 下 一 级 列表 
字体 大 小 为 16px， 代 码 如 示例 5.9 所 示 。 
示例 5.9: 
<!IDOCTY?PE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
li{ 
font-weight:bold: 
! font-size:12px; 


} 
ulliul liul li{ font-style:italic:} 
| ul li ol li{ font-size:16px: } 
</style> 
</head> 
<body> 
<h1> 新 迈 尔 学 习 平台 </h1> 
<p> 欢 迎 来 到 新 迈 尔 学 习 平台 ， 这 里 将 为 您 提供 丰富 的 学 习 内 容 。</p> 
<u> 
<li> 网 页 制作 
<u> 
<1li> 使 用 Dreamweaver 制作 网 页 </li> 
<li> 使 用 CSS 布局 和 美化 网 页 
<ul> 
<li>CSS 初级 </li> 
<li>CSS 中 级 </li> 
<li>CSS 高 级 </li> 
</ul> 
</> 
<li> 使 用 JavaScript 制作 网 页 特效 </li> 
</ul> 
</> 
<1i> 平 面 设 计 
! <o> 
| <I 记 美术 基础 </li> 
| <1i> 使 用 Photoshop 处 理 图 形 图 像 </li> 
< 这 使 用 Illustrator 设计 图 形 </li> 
| <1i> 制 作 Flash 动画 </li> 
| </ol> 
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</> 
</ul> 
<p> 如 果 您 有 任何 问题 ， 欢 迎 给 我 们 留言 。</p> 


</html> 
在 浏览 器 中 打开 的 页 面 效果 如 图 5.19 所 示 ,“CSS 初级 ”等 3 个 列表 字体 为 斜体 加 粗 ， 和 
和 字体 大 小 14px,“ 美 术 基础 ”等 4 个 列表 字体 为 粗 体 和 字体 大 小 16px。 这 个 例子 充分 体 ， 
现 了 标签 继承 和 CSS 样式 继承 的 关系 。 | 


ls l=.9 


D Te 
CG Dfile:///D:/ 课 程 /html+ 儿 空 至 


新 迈 尔 学 习 平台 


| 人 这 里 将 为 您 提供 丰富 的 学 
习 内 容 。 


3. 使 用 Illustrator 设 计 图 形 
4 制作 Flash 动 画 


| 如 果 您 有 任何 问题 ， 欢 迎 给 我 们 留言 。 





图 5.19 CSS 的 继承 应 用 
5.5 技能 训练 


1. 制作 杜甫 《绝句 》 

需求 说 明 : 

使 用 标题 标签 和 有 段落 标签 制作 杜甫 的 诗 《 绝 句 》， 模 仿 课堂 中 讲解 的 例子 ， 设 置 诗 的 
正文 的 字体 为 斜体 ， 字 体 大 小 为 14px， 完 成 效果 如 图 5.20 所 示 。 | 
2. 制作 《 归 园 田 居 其 一 》 
需求 说 明 : | 
使 用 标题 标签 和 段落 标签 制作 陶渊明 的 词 《 归 园田 居 其 一 》， 标题 和 正文 之 间 使 用 水 
平 线 分 隔 ， 使 用 样式 设置 标题 为 粗 体 ， 字 体 大 小 为 24px; 正文 第 一 段 字体 大 小 为 12px， 
字体 为 斜体 ， 第 二 段 字体 大 小 为 18px， 完 成 页 面 效 果 如 图 5.21 所 示 。 
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D 号 辕 一 层 其 一 
© Dfile 7 三 htr 让 


归 园 田 居 其 一 


CD filey//D:/ 课 六 | 三 


0 Es 
oy 2 
万 容 让 前 在 ， 间 而 儿 九 阅 。 
拟人 再 办 哼 吾 舱 ， 
， 桃李 罗 莹 前。 
一 站 与 局 上 齐 无 。 远 人 村 ;依依 壕 里 烟 。 
蔡 委 西 蛤 天 下 要 . 狗 哆 深 蔡 十， 鸡 鸣 桑 树 颠 。 
/7 路 交 是 万 于 入 下 水， 应 宝 有 人 网; 
， 复 得 返 自然 ; 





图 5.20 《绝句 》 效 果 图 图 5.21 《 归 园 田 居 其 一 》 效 果 图 
3. 制作 杜牧 《清明 》 
需求 说 明 : 
| 制作 杜牧 的 诗 《 清 明 》， 标 题 使 用 <h1l> 标 签 ， 其 他 文本 均 放 在 段落 标签 <zp> 中 ，CSS 
| 样式 设置 要 求 如 下 。 


(1) 使 用 标签 选择 器 设置 标题 字体 大 小 为 20px。 

(2) 使 用 标签 选择 器 设置 页 面 中 所 有 段落 标签 中 的 文本 字体 大 小 为 16px。 
(3) 使 用 类 选择 器 设置 诗 的 正文 和 译文 内 容 字体 为 粗 体 。 

(4) 使 用 了 D 选择 器 设置 译文 标题 为 斜体 。 

页 面 完成 的 效果 如 图 5.22 所 示 。 


x 
G 口 fileVWDY 课 程 /htm 六 
清明 


清明 时 节 雨 纷纷 ， 路 上 行人 欲 断 魂 。 
借 问 酒家 何 处 有 ? 牧童 递 指 可 花村 。 


介绍 
本 《803 年 一 约 852 午 )， 字 牧 之 号 侈 川 居 


是 罕 相 村 个 之 孙 ， 社 从 部 之 子 。 





图 5.22 《清明 》 效 果 图 


4. 制作 体育 新 闻 页 面 

需求 说 明 : 

使 用 学 习 过 的 标签 、 样 式 制作 体育 新 闻 页 面 ， 具 体 要 求 如 下 。 

(1) CSS 样式 体现 出 复合 选择 器 的 应 用 。 

(2) 分 别 使 用 行内 样式 、 内 部 样式 表 和 外 部 样式 表 的 形式 制作 本 页 面 ， 使 用 链接 方 
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式 引用 外 部 样式 表 。 
页 面 完成 的 效果 如 图 5.23 所 示 。 


nr 





口 体坛 襟 焦 做 于 :NBA 视频 





国内 足球 





和 


元 出 志和 





图 5.23 体育 新 闻 
5. 制作 开心 网 -游戏 列表 
需求 说 明 : 
使 用 学 习 过 的 标签 、 样 式 制 作 开心 网 游戏 列表 页 面 ， 具 体 要 求 如 下 。 
(1) CSS 样式 体现 出 复合 选择 器 的 应 用 。 
(2) 分 别 使 用 行内 样式 、 内 部 样式 表 和 外 部 样式 表 的 形式 制作 本 页 面 ， 使 用 链接 方 | 
式 引 用 外 部 样式 表 。 | 
页 面 完 成 的 效果 如 图 5.24 所 示 。 
6. 制作 公司 介绍 页 面 
需求 说 明 : 
使 用 学 习 过 的 标签 、 样 式 制作 公司 介绍 页 面 ， 具 体 要 求 如 下 。 
(1) CSS 样式 体现 出 复合 选择 器 的 应 用 。 | 
(2) 分 别 使 用 行内 样式 、 内 部 样式 表 和 外 部 样式 表 的 形式 制作 本 页 面 ， 使 用 链接 方 | 
式 引 用 外 部 样式 表 。 
页 面 完 成 的 效果 如 图 5.25 所 示 。 
| 公司 介绍 
| 目前 ， 新 迈 尔 〈 北 京 》 科 技 有 限 公司 有 4 个 学 院 ， 分 别 为 电子 商务 学 院 ， 


| 数字 艺术 学 院 ， 互 联网 + 学 院 和 智能 制造 学 院 - 
新 迈 尔 〈 北 京 ) 科技 有 限 公司 坐落 于 北京 市 海淀 区 中 关 村 软件 园 ， 是 一 家 集 






dr 职业 教育 、 职 业 培 训 和 国际 教育 三 大 事业 集群 于 一 体 ， 致力 于 将 领先 的 前 
| 沿 科技 转化 为 教育 成 果 ， 通 过 高 品质 的 教育 进行 信息 化 产业 的 人 才 培 养 ， 以 
| 服务 战略 新 兴 产业 领域 的 科技 企业 。 

了 | 公司 以 政府 、 高 校 及 中 关 村 战 噬 新 兴 产业 领 皇 企业 为 依 江 ， 同 中 关 村 数 百 衣 


| 只有 代 衣 性 企业 的 一 绕 经 理 、 高 级 研发 人 员 等 组 成 专业 实 训 团队 、 谋 程 研发 
人 团队 和 讲师 团队 ， 与 高 校 开展 深入 合作 ， 培 养 信息 技术 类 技能 型 、 应 用 型 
复合 型 专业 人 才 。 


5.24 ”开心 网 游戏 列表 图 5.25 公司 介绍 页 面 
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本 章 总 结 


CSS 的 意义 : 使 页 面 更 好 地 控制 和 美化 。 

CSS 的 优势 :内 容 与 表现 分 高、 表现 的 统一 、 利 于 网 页 被 搜索 引擎 收录 、 减 少 网 
页 的 代码 量 ， 增 加 网 页 的 浏览 速度 ， 节 省 网 络 带宽 。 

CSS 样式 表 的 3 种 引入 方式 : 行内 样式 、 内 部 样式 表 和 外 部 样式 表 ， 及 其 优先 级 。 
层 倒 样式 表 的 语法 和 常用 的 选择 器 : 标签 选择 器 、 类 名 选择 器 和 ID 选择 器 。 
样式 表 的 高 级 应 用 。 
CSS 的 继承 性 。 


固 回 

















图 图 轿 加 
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美化 网 页 元 素 


网 站 就 像 穿 衣 打 扮 ， 要 有 自己 的 风格 和 个 性 ， 且 符合 自身 的 身份 职务 。 也 就 是 说 网 站 
要 根据 行业 特点 进行 美化 ， 比 如 说 科技 类 网 站 善 用 蓝 色 ， 娱 乐 类 网 站 善 用 橙色 ， 政 府 门 户 
类 网 站 大 多 用 红色 调 。 

本 章 以 文字 样式 的 CSS 设置 开始 ， 详 细 讲解 如 何 使 用 CSS 设置 文字 的 各 种 效果 、 文 
字 与 图 片 的 混 排 效果 ， 以 及 超 链接 样式 的 各 种 方式 ， 最 后 讲解 网 页 中 背景 颜色 、 背 景 图 片 
的 各 种 设置 方法 和 列表 样式 的 设置 方法 。 

通过 本 章 的 学 习 ， 可 以 对 网 页 的 文本 、 图 片 、 列 表 、 超 链接 设置 各 种 各 样 的 效果 ， 使 
网 页 看 起 来 美观 大 方 、 赏 心 悦 目 。 


本 章 工作 任务 | 
> ”制作 购物 网 站 商品 分 类 页 面 
> ”制作 支付 宝应 用 页 面 


本 章 技能 目标 





会 使 用 CSS 设置 字体 样式 和 文本 样式 
会 使 用 CSS 设置 图 片 对 齐 方式 

会 使 用 CSS 设置 超 链接 样式 

会 使 用 CSS 设置 鼠标 滑 过 形状 

会 使 用 CSS 设置 背景 样式 

会 使 用 CSS 设置 列表 样式 
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背诵 英文 单词 
请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 , 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
font-family. 


font-size. 
font-weight, 





text-align, 





text-indent, 
line-height 





text-decoration 
Vertical-allign 
background-color 
background-image 
background-position 
background-repeat. 
background, 

| list-style-type. 

| list-style 


预习 并 回答 以 下 问题 


1. 在 某 段 文本 中 为 了 突出 某 几 个 文字 ， 通 常 使 用 什么 标签 编写 ? 

2. 设置 文本 字体 加 粗 的 属性 是 什么 ? 

3. 去 掉 列 表 项 前 标记 符 的 CSS 属性 是 什么 ? 

4. 描述 使 用 font 属性 设置 字体 类 型 、 风 格 、 大 小 、 粗 细 的 样式 顺序 。 


6.1 使 用 CSS 编辑 网 页 文本 


文字 ， 就 是 网 页 的 内 容 ， 是 网 页 上 最 重要 的 信息 载体 与 交流 工具 ， 网 站 大 部 分 的 主要 
| 信息 一 般 都 以 文本 形式 为 主 ， 因 此 本 节 将 学 习 字体 和 文本 属性 ， 这 对 于 创造 出 专业 水 准 的 
| 网 页 排版 非常 重要 。 一 个 网 站 的 品质 如 何 ， 有 时 候 只 要 看 看 它 用 的 字体 就 能 一 目 了 然 。 使 
| 用 CSS 设置 字体 大 小 、 字 体 类 型 、 文 字 颜 色 、 字 体 风格 等 字体 样式 ， 通 过 CSS 设置 文本 
| 段落 的 对 齐 方式 、 行 高 、 文 本 与 图 片 的 对 齐 方式 ， 以 及 文字 缩 进 方式 来 排版 网 页 。 


6.1.1 文本 在 网 页 中 的 意义 


在 上 网 浏览 网 页 时 ， 看 到 最 多 的 就 是 文字 ， 那 么 文字 在 网 页 中 除了 传递 信息 外 ， 还 有 
其 他 什么 意义 呢 ? 如 图 6.1 所 示 的 阿 芙 精油 官网 ， 看 完 之 后 描述 一 下 看 到 了 什么 。 
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大 弓 十 革履 殉 纯 串 125ml 





令 肌肤 焕 和 白水 嫩 
和 
SR 
图 6.1 阿美 官网 


经 过 分 析 可 以 看 出 ， 大 家 一 眼看 到 的 都 是 “ 令 肌肤 焕 白 水 嫩 ” 这 个 大 标题 ， 而 文字 的 


层次 及 大 小 对 比 的 效果 ， 是 经 过 CSS 处 理 美化 的 文本 ， 这 些 文本 突出 了 页 面 的 主题 。 因 此 
使 用 CSS 美化 网 页 文本 具有 如 下 意义 。 

加 ”使 用 CSS 美化 过 的 页 面 文本 ， 使 页 面 漂亮 、 美 观 ， 吸 引用 户 。 

回 “ 可 以 很 好 地 突出 页 面 的 主题 内 容 ， 使 用 户 第 一 眼 可 以 看 到 页 面 主要 内 容 。 

回 ”具有 良好 的 用 户 体验 。 

回 ”有 效 地 传递 页 面 信息 。 

了 解 了 使 用 CSS 美化 网 页 文本 在 网 页 中 的 意义 ， 下 面 开始 使 用 CSS 设置 字体 样式 学 
习 之 旅 。 在 学 习 之 前 ， 大 家 先 来 认识 一 个 重要 的 编辑 文本 的 标签 一 一 <span> 标 签 。 


6.1.2 <span> 标签 


在 前 面 的 章节 中 , 已 经 学 习 了 很 多 HTML 标签 , 都 可 以 用 来 编辑 文字 ， 比 如 有 标题 标 
签 、 段 落 标签 、 列 表 、 表 格 来 编辑 文本 ， 那 么 现在 想 要 将 一 个 <p> 标 签 内 的 几 个 文字 或 者 
某 个 词语 凸显 出 来 ， 应 该 如 何 解决 呢 ? 这 时 <span> 标 签 就 闪 亮 登场 了 。 

在 HIML 中 ，<span> 标 签 是 被 用 来 组 合 HTML 文档 中 的 行内 元 素 的 ， 它 没有 固定 的 
格式 表示 ， 只 有 对 它 应 用 CSS 样式 时 ， 才 会 产生 视觉 上 的 变化 。 例 如 ， 示 例 6.1 中 的 文本 
“新 迈 尔 ”突出 显示 就 是 <span> 标 签 的 作用 。 

示例 6.1: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 无 标题 文档 </title> 
<style> 
p{font-size:14px;} 
Pp #dream {font-size:24px:;color:red:font-weight:bold:} 
Pp new {font-size:36px:color:blue;} 
</style> 
</head> 


<p> 享 受 一 流 的 服务 </p> 
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<p> 在 新 迈 尔 ， 有 一 群 人 默默 支持 你 成 就 <span id="dream">IT 梦 </span></p> 
<p> 选 择 <span class="new"> 新 迈 尔 </span> 学 习 ， 成 就 你 的 梦想 </p> 
</body> 


Et 由 上 面 的 代码 可 以 看 出 ， 使 用 CSS 为 <span> 标 签 添加 样 


eC afieWaes 多 = 上 | ” 式 ， 既 可 以 使 用 类 选择 器 和 ID 选择 器 ， 也 可 以 使 用 标签 选择 
部 妥 - 沈 的 8 务 器 ， 在 浏览 器 中 打开 的 页 面 显 示 效 果 如 图 6.2 所 示 。 
在 新 轨 尔 ,有 一 群 人 六 寺 人 rntIT 梦 | = 
站 新 迈 尔 #, joni | 6.1.3 字体 样式 
CSS 字体 属性 定义 字体 类 型 、 字 体 大 小 、 字 体 是 否 加 粗 、 
字体 风格 等 ， 常 用 的 字体 属性 、 含 义 及 用 法 如 表 6.1 所 示 。 
表 6.1 常用 字体 属性 


图 6.2” ”<span> 标签 的 显示 效果 


在 一 个 声明 中 设置 所 有 字体 属性 








| 为 了 帮助 大 家 深入 地 理解 这 几 个 常用 的 字体 属性 ， 在 实际 应 用 中 灵活 地 运用 这 些 字体 

| 属性 ， 使 网 页 中 的 文本 发 挥 其 最 大 作用 ， 下 面 对 这 几 个 字体 属性 进行 详细 介绍 。 
1. 字体 类 型 

| 在 CSS 中 字体 类 型 是 通过 font-family 属性 来 控制 的 。 例如 , 需要 将 HTML 中 所 有 <p> 

| 标签 中 的 英文 和 中 文 分 别 使 用 Verdana 和 楷体 显示 ， 则 可 以 通过 标签 选择 器 来 定义 <p> 标 

| 签 中 元 素 的 字体 样式 ， 语 法 如 下 : 

| p{font-family:Verdana," 楷 体 ":} 


| 这 句 代码 声明 了 HTML 页 面 中 <p> 标 签 的 字体 样式 ， 并 同时 声明 了 两 种 字体 ， 分 别 是 
| Verdana 和 楷体 ， 这 样 浏览 器 会 优先 用 英文 字体 显示 文字 ， 如 果 英 文字 体 里 没有 包含 的 字 
| 符 〈 通 常 英文 字体 不 支持 中 文 )， 则 从 后 面 的 中 文字 体 里 面 找 ， 这 样 就 达到 了 英文 使 用 
| Verdana、 中 文 使 用 楷体 的 不 同 字 体 效果 。 
| 这 样 设置 的 前 提 是 要 确定 计算 机 中 有 Verdana、 楷 体 这 两 种 字体 。 如 果 计 算 机 中 没有 
| Verdana， 中 文 和 英文 都 将 以 楷体 显示 ; 如 果 计 算 机 中 没有 楷体 ， 那 么 中 文 、 英 文 将 以 计算 
| 机 默认 的 某 种 字体 显示 。 所 以 在 设置 中 文 、 英 文 以 不 同 字体 显示 时 ， 尽 可 能 设置 计算 机 中 
| 有 的 字体 ， 这 样 就 可 以 实现 中 文 、 英 文 显示 不 同 字 体 效果 了 。 

font-family 属性 可 以 同时 声明 多 种 字体 ， 字 体 之 间 用 英文 输入 模式 下 的 逗号 分 隔 开 。 
另外 ， 一 些 字 体 的 名 称 中 间 会 出 现 空格 (如 Times New Roman 字体 ) 或 者 中 文 (如 楷体 )， 
这 时 需要 用 双 引 号 将 其 引起 来 ， 使 浏览 器 知道 这 是 一 种 字体 的 名 称 。 
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现在 以 一 个 常见 的 文章 类 页 面 来 演示 一 下 字体 类 型 的 效果 , 页 面 代码 如 示例 62 所 示 。 | 
示例 6.2: | 


<!DOCTYPE html> 4 
<html> 全 | 
<head> 
<meta charset="UTF-8"> Note 
<title></title> 
<style type="text/css"> 
body{ 


font-family: ”Microsoft YaHei," 微 软 雅 黑 "; 
由 
</style> </head> <body> <div class="wrap"> 
<p> 作 者 : hebe</p> 
<h1> 走 过 时 光 里 的 二 十 岁 <hl> 
<p> 想 过 很 多 次 ， 该 用 怎样 的 词语 去 定义 走 过 的 时 光 里 的 二 十 岁 。 很 喜欢 这 样 的 话 : 青 | 
春 就 是 二 十 岁 时 站 在 马路 的 中 间 却 不 知道 该 往 哪 个 方向 走 。.…… </p> 
<p> 有 时候 傻 傻 地 想 ， 当 我 三 十 岁 ， 五 十 岁 或 是 八 十 岁 的 时 候 ， 再 回 过 头 看 自己 的 二 十 | 
岁 ， 会 是 一 种 什么 样 的 心境 和 感觉 。 会 觉得 日 子平 淡 无 奇 ， 就 这 么 一 天 天 过 去 ， 功 泣 不 起 一 点 涟 注 ? 会 | 
觉得 那 时候 的 自己 还 算 有 梦想 ， 敢 追求 ? …… </p> 
<hl> 拾 梦 人 </hl> 
<p> 岁 已 至 晚秋 ， 一 个 人 落 步 田间 的 无 人 小 径 ， 也 不 知 在 寻 现 些 什么 ， 或 许 只 是 想 在 这 | 
秋 上 日 的 最 后 一 抹 残 阳 里 发 现 点 东西 。 寒 风 吹 起 片 片 落叶 ， 划 过 掠 过 我 的 眼帘 ， 好 像 在 向 我 昭示 着 什么 。 
俯 身 ， 才 发 觉 余 晖 下 的 落叶 缤纷 ， 原 来 你 是 在 向 我 抗议 的 吗 ? 抱 欢 ， 在 这 一 片 寂静 里 除了 你 们 ， 好 像 只 | 
有 我 在 这 寒 风 里 走动 着 ， 好 像 只 有 我 在 这 寂静 里 咯 叶 咯 咏 作 响 。 也 许 ， 我 是 觉得 孤单 的 吧 ! 看 到 你 们 便 | 
经 不 住 诱惑 抬 起 来 仔细 地 端详 ， 想 要 发 觉 只 属于 你 们 的 秘密 。</p> 
<p> 春 夏秋 冬 的 流转 带 走 了 我 儿 时 那么 多 秘密 , 我 只 是 从 漫天 落叶 里 撒 取 一 片 落叶 而 已 。 | 
儿 时 的 梦 亦 如 这 缤纷 的 落叶 撒 满 一 地 ， 那 时 ， 我 不 明道 理 ， 只 想 撑 一 把 伞 在 雨 幕 里 安安 静 静 的 待 着 , 也 | 
不 懂 什 么 才 是 户 悉 ， 只 是 喜欢 看 雨滴 落地 进 溅 ， 只 是 爱 这 雨 声 入 耳 ， 只 是 不 由 的 忍 不 住 亲近 ; 那 时 , 我 | 
不 懂 世 事 ， 只 想 砌 起 一 面 墙 把 自己 悄悄 的 藏 起 来 ， 也 不 知 什么 才 是 逃避 ， 只 是 愿意 在 一 片 寂静 里 做 我 自 | 
己 的 王 ， 只 是 乐意 在 一 阵 发 果 里 做 我 自己 的 梦 ， 只 是 禁不住 那 渴 望 想 藏匿 。</p> 
</div> 
</body> 
</html> 


上 面 是 文章 类 页 面 的 HTML 代码 ， 从 代码 中 可 以 看 到 ， 页 面 标题 放 在 <h1> 标 签 中 ， 
文章 内 容 放 在 <p> 标 签 中 ， 了 解 了 页 面 的 HIML 代码 ， 下 面 使 用 内 部 样式 表 的 方式 创建 | 
CSS 样式 ,由 于 页 面 中 所 有 文本 均 在 <body> 标 签 中 , 因此 设置 <body> 标 签 中 所 有 字体 样式 | 
如 下 : 

body {font-family: Times New Roman, Microsoft YaHei," 微 软 雅 黑 ";} 

在 浏览 器 中 查看 页 面 ， 效 果 如 图 6.3 所 示 ， 页 面 中 中 文字 体 为 “微软 雅 黑 ” 由 于 作者 ， 
计算 机 中 没有 字体 Times New Roman， 因 此 页 面 中 的 英文 字体 显示 为 Microsoft YaHei。 
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该 用 怎样 的 词语 去 定义 走 过 的 时 光 里 的 二 十 岁 。 很 喜欢 这 样 的 话 : 青春 就 
EO 尖 - 


有 时 候 傻 傻 地 想 ， 当 我 三 十 岁 ， 全 和 
会 是 一 种 什么 样 的 心境 和 感觉。 A ， 
点 连 注 ? 会 觉得 那 时 候 的 自己 还 算 有 上 梦想 ， 敢 追求 ? 


拾 梦 人 


岁 已 至 晚秋 ， A 也 不 知 在 寻 页 些 什么 ， 或 许 ; 
gg 风 吹 起 片 片 沙 叶 ， 划 过 掠 过 我 的 眼帘 
示 荐 什么 , 才 发 觉 /余晖 下 的 落叶 缤纷 ， 折 汪 从 是 训 向 扩 议 的 中 的 ,在 这 
et 好 像 只 有 我 在 这 赛 风 里 走动 着 , 好 像 只 有 我 在 这 寂静 里 咯 叶 
图 6.3 文章 类 页 面 
注释 : (1) 当 需 要 同时 设置 英文 字体 和 中 文字 体 时 ， 一 定 要 将 英文 字体 设置 在 中 文字 体 之 前 ， 如 果 中 文字 体 设置 于 英文 
字体 之 前 ， 英 文字 体 设置 将 不 起 作用 。 
(2) 在 实际 网 页 开发 中 ， 网 页 中 的 文本 如 果 没 有 特殊 要 求 ， 通 常设 置 为 宋体 ， 宋 体 是 计算 机 中 默认 的 字体 ， 如 果 需 要 其 
他 比较 炫 酷 的 字体 则 使 用 图 片 来 蔡 代 。 
2. 字体 大 小 
在 网 页 中 ， 通 过 文字 的 大 小 来 突出 主体 是 非常 常用 的 方法 ，CSS 是 通过 font-size 属性 
来 控制 文字 大 小 的 ， 常 用 的 单位 是 px 像素 )， 在 font.css 文件 中 设置 <h1> 标 签字 体 大 小 
为 24px，<h2> 标 签字 体 大 小 为 16px，<p> 标 签字 体 大 小 为 12px， 代 码 如 下 所 示 。 
body {font-family: Times,"Times New Roman", "楷体 ";} 
hl {font-size:24px:} 
h2 {font-size:16px:} 
Pp{font-size:12px:} 
由 于 在 第 5 章 对 于 字体 大 小 的 效果 已 演示 很 多 了 ， 这 里 不 再 展示 页 面 效果 图 。 
在 CSS 中 设置 字体 大 小 还 有 一 些 其 他 的 单位 ， 如 ip、cm、mm、pt、pc， 有 时 也 会 上 
百分比 (%) 来 设置 字体 大 小 ， 但 是 在 实际 的 网 页 制作 中 ， 这 些 单位 并 不 常用 ， 因 此 这 里 

















3. 字体 风格 
人 们 通常 会 用 高 、 矮 、 胖 、 瘦 、 义 称 来 形容 一 个 人 的 外 形 特点 ， 字 体 也 是 一 样 的 ， 也 有 

















自己 的 外 形 特点 ， 如 倾斜 、 正 常 ， 这 些 都 是 字体 的 外 形 特 点 ， 也 就 是 通常 所 说 的 字体 风格 。 


在 CSS 中 , 使 用 font-style 属 性 设置 字体 的 风格 ,font-style 属 性 有 3 个 值 , 分 别 是 normal、 


| a 分 别 告诉 浏览 器 显示 标准 的 字体 样式 、 斜 体 字体 样式 、 倾 斜 的 字体 样式 
| 默认 值 为 nomal。 其 中 italic 和 oblique 在 页 面 中 显示 的 效果 非常 相似 。 


， 码 如 下 所 示 。 


为 了 观看 italic 和 oblique 的 效果 , 在 HTML 页 面 中 标题 代码 增加 <span> 标 签 , 修改 代 


<h1> 作 者 <span>hebe</span></hl> 

body {font-family: Times New Roman, Microsoft YaHei," 微 软 雅 黑 ";} 
hl {font-size:24px:; font-style:italic:} 

Pp span{font-style:oblique;} 

.p21{font-size:16px: font-style:normal;} 

p{font-size:12px:} 
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在 浏览 器 中 查看 的 页 面 效果 如 图 6.4 所 示 ， 标 题 都 以 斜体 显示 ，italic 和 oblique 两 个 | 
信 的 显示 的 效果 有 点 相似 ， 而 nonmal 显示 字体 的 标准 样式 ， 因 此 依然 显示 p2 标准 的 字体 
样式 。 


作者 :hcbe 


ETII6EW+ 光 


想 过 很 多 次 ， 该 用 怎样 的 词语 去 定义 走 过 的 时 光 里 的 二 十 岁 。 很 喜欢 这 样 的 话 : 青春 就 是 | 
二 十 岁 时 站 在 马路 的 中 间 却 不 知道 该 往 哪个 方向 走 。 | 


有 时 蛋 俩 全 地 想 ， 当 我 三 十 岁 ,五 十 岁 或 是 八 十 岁 的 8 时候 ， 样 的 心境 和 感觉 | 





再 回 过 头 看 自己 的 二 十 岁 ， 会 是 一 种 什么 相 
会 觉得 日 子平 淡 才 奇 ， 就 这 么 一 天 天 过 去 ， 荡 澜 不 起 一 pe 改 扯 求 ? … 


需 因 人 


岁 已 至 晚秋 ， 一 个 人 落 步 田 间 的 无 人 小 径 ，, 也 不 知 在 寻 现 些 什么 ， 或 许 只 是 想 在 这 秋 日 的 最 后 一 抹 残 阳 里 发 现 点 东西 . 
喜 风 吹 起 片 片 落叶 ， 划 过 掠 过 我 的 眼 市 ， 人 在 内 二 什么 售 身 ， 才 发 这 余 吁 下 的 落叶 综 纷 ， 
议 的 吗 ? 抱 客 ,在 光一 片 到 静 里 除了 你 们 ,好像 只 有 拒 在 这 赛 风 里 走动 在， 好 像 只 有 我 在 这 家 静 里 只 咏 咯 琉 作 响 ， 也 

许 ,我 是 党 每 弄 单 的 吧 ! 看 到 你 们 便 经 不 住 旋 悉 栓 起 来 仔细 的 注 评 ， 椒 要 发 觉 只 属于 你 们 的 秘密 。 


的/ 从 直 和 多 侈 过 我 只 是 从 漫天 活 叶 里 撒 取 一 片 落 叶 而 已 。 儿 8 的 梦 亦 如 这 
rg 只 想 迭 一 -在 雪 安 雪 各 科 入 二 ， 也 不 征 什 么 才 足 京 悉 ， 只 是 喜欢 ; 
不 住 条 近 ; 那 时 ， 忆 季 ， 认 起 碟 息 一 而 二 把 自己 情 情 的 呈 息 来 ， 志 不 知 什么 才 
ER Ee - 片 训 静 至 做 我 自己 的 主 ， 人 痊 发 宁 里 做 我 自己 的 劳 ， 只 是 荣 不 仁 那 渴 旦 要 营区 。 





图 6.4 字体 风格 效果 图 

4. 字体 的 粗细 
在 网 页 中 字体 加 粗 突出 显示 ， 也 是 一 种 常用 的 字体 效果 。CSS 中 使 用 font-weight 属性 
控制 文字 粗细 , 可 以 将 本 身 是 粗 体 的 文字 变 为 正常 粗细 。 font-weight 属性 的 值 如 表 6.2 所 示 。 | 


表 6.2 font-weight 属性 的 值 








什 说 明 
normal 默认 值 ， 定 义 标准 的 字体 | 
bold 粗 体 字体 | 
bolder 更 粗 的 字体 | 
lighter 更 细 的 字体 | 
100、200、300、400、500、600、700、800、| 定义 由 细 到 粗 的 字体 ，400 等 同 于 normal，700 等 同 于 
900 bold 


现在 修改 CSS 样式 表 中 字体 样式 ， 代 码 如 下 所 示 。 
body{ font-family: Times New Roman, Microsoft YaHei," 微 软 雅 黑 ";} 
hl {font-size:24px: font-style:italic:} 
.p2 {font-size:16px: font-style:normal:} 
Pp{font-size:12px:} 
Pp span{font-weight:bold:} | 
在 浏览 器 中 查看 的 页 面 效果 如 图 6.5 所 示 ， 标 题 后 半 部 分 变 为 字体 正常 粗细 显示 ， 商 
品 分 类 中 的 小 分 类 字体 加 粗 显 示 。font-weight 属 性 也 是 CSS 设置 网 页 字体 常用 的 一 个 属性 ， 
通常 用 来 突出 显示 字体 。 





| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
人 
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ELLIE + 
相交 。 半生 们 的 时 守 村 的 时 炎 时 的 一 + 几 。 和 喜欢 这 衬 的 话 :事主 
二 十 岁 时 让 在 马路 的 中 间 却 不 知道 该 往 记 个 方向 走 


有 时 候 傻 傻 地 想 ， 当 我 三 十 将， 五 十 岁 或 是 八 十 岁 的 时 候 ， ,会 是 一 种 什么 村 多 心境 和 感觉 
会 肖 得 日 了 平淡 读 奇 ,就 这 么 天 天 过 去 ， 荡 苦 不 起 一 Ee 下 所 求 ? 


前 加 


岁 已 至 晚秋 ， pe ee 和 和 
4 什么 ， 久生 才 从 二 村上 的 可 叶 近 的 原来 你 中 在 向 拖 放 
其， 在 这 - 有 个 全 信和 在 这 半 久生 世人 听 ， 
降 。 a 大 到 你 们 使 经 个 作恶 反超 来 他 组] 详 详 ， 旭 要 发 觉 只 居于 你 们 的 杨 至 


上 证 一 商 一 和 rt 一 片 落 时 而 已 ， 儿 8j 的 梦 亦 如 这 缤纷 的 落叶 撤 满 一 

至 ， 只 起 撑 甘于 安安 静 圾 的 待 看 ,也 不 筷 什 么 才 是 彭 秋 ， 只 是 喜欢 看 十 注 东 地 进 注 ， 

A 贡生 本 的 直人 家 计 ， 六 时。 匠人 和 菜 ， 抽 电站 电 必 介 引 志 寂 中 类 御 公 才 
计 避 ， 只 是 居间 在 一 片 宙 静 里 侯 我 自己 的 主 ， 只 是 乐意 在 一 笑 发 嘿 里 依 生 自己 的 梦 ， 只 是 禁不住 于 沁 奉 想 蕊 天, 





图 6.5 字体 粗细 效果 图 
5. 字体 属性 
| 在 前 面 讲解 的 几 个 字体 属性 都 是 单独 使 用 的 , 在 CSS 中 如 果 对 同一 部 分 的 字体 设置 多 
| 种 字体 属性 时 , 需要 使 用 font 属性 来 进行 声明 , 即 利 用 font 属性 一 次 设置 字体 的 所 有 属性 ， 
各 个 属性 之 间 用 英文 空格 分 开 ， 但 需要 注意 这 几 种 字体 属性 的 设置 顺序 依次 为 : 字体 风格 
一 字体 粗细 一 字体 大 小 一 字体 类 型 。 
| 例如 ， 在 上 面 的 例子 中 ，<p> 标 签 中 其 套 的 <span> 标 签 设置 了 字体 的 类 型 、 大 小 、 风 
| 格 和 粗细 ， 使 用 font 属性 可 表示 如 下 。 
| p span{font:oblique bold 12px "楷体 ":} 


| 以 上 讲解 了 字体 在 网 页 中 的 应 用 ， 人 但 是 在 网 页 实际 应 用 中 ， 

使 用 最 为 广泛 的 元 素 ， 除 了 字体 之 外 ， 就 是 由 一 个 个 字体 形成 的 文本 ， 大 到 网 络 小 说 、 新 
| 闻 公 告 ， 小 到 注释 说 明 、 温 志 提 示 、 网 砚 中 的 条 种 相 这 六 和 | 这 些 都 是 互联 网 中 最 常见 的 
Wi 
| ”如果 要 使 用 CSS 把 网 页 中 的 文本 设置 得 非常 美观 和 漂亮 , 该 如 何 设置 呢 ? 这 就 需要 下 
| 面 的 知识 一 一 使 用 CSS 排版 网 页 文本 。 


6.1.4 使 用 CSS 排版 网 页 文本 


| 在 网 页 中 ， 用 于 排版 网 页 文本 的 样式 有 文本 颜色 、 水 平 对 齐 方式 、 首 行 缩 进 、 行 高 
| 文本 装饰 、 垂 直 对 齐 方式 。 常 用 的 文本 属性 、 含 义 及 用 法 如 表 6.3 所 示 。 





















































表 6.3 文本 属性 
属 性 含 义 举例 
color 设置 文本 颜色 Color:#00C: 
text-align 设置 元 素 水 平 对 齐 方 式 text-align:right; 
text-indent 设置 首 行文 本 的 缩 进 text-indent:20px: 
line-height 设置 文本 的 行 高 line-height:25px: 
text-decoration 设置 文本 的 装饰 text-decoration:underline; 








在 这 几 种 文本 属性 中 ， 大 家 对 color 属性 已 不 陌生 ， 其 他 的 属性 对 大 家 来 说 是 全 新 的 
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内 容 。 下 面 以 总 裁 致 辞 页 面 为 例 ， 详 细 讲 解 并 演示 这 几 种 属性 在 网 页 中 的 用 法 。 
1. 文本 颜色 











在 HTML 页 面 中 ， 颜 色 统一 采用 RGB 格式 ， 也 就 是 通常 所 说 的 “ 红 、 绿 、 蓝 ”三 原 | 














色 模 式 。 每 种 颜色 都 由 这 3 种 颜色 的 不 同比 例 组 成 , 按 十 六 进 制 的 方法 表示 , 如 “ 考 FFFFF” 
表示 白色 、“ 因 00000” 表 示 黑 色 、“ 寿 F0000” 表 示 红 色 ， 其 中 ， 前 两 位 表示 红色 分 量 ， 中 
间 两 位 表示 绿色 分 量 ， 最 后 两 位 表示 蓝 色 分 量 。 





虽然 在 第 5 章 使 用 color 属性 时 都 是 用 英文 单词 表示 颜色 ， 但 是 使 用 英文 单词 表示 是 | 
有 限 的 ， 因 此 在 网 页 制作 中 基本 上 都 使 用 十 六 进 制 方法 表示 颜色 。 使 用 十 六 进 制 可 以 表示 | 


所 有 的 颜色 ， 如 “#A983D8”“#95F141”“#396”“#906” 等 。 从 这 些小 例子 中 可 以 看 到 ， 


有 的 颜色 为 6 位， 有 的 为 3 位 ， 为 什么 ? 用 3 位 表示 颜色 值 是 颜色 属性 值 的 简写 ， 当 这 6 | 
位 颜色 值 相 邻 数字 两 两 相同 时 可 两 两 缩写 为 一 位 ， 如 “#336699” 可 简写 为 “#369”，| 


“#EEFF66” 可 简写 为 “#EF6”。 

下 面 以 总 裁 致 辞 页 面 为 例 来 演示 文本 颜色 ， 页 面 的 HTML 代码 如 示例 6.3 所 示 ， 页 1 
中 的 主体 内 容 放 在 <p> 标 签 内 ， 数 字 均 放 在 <span> 标 签 中 。 

示例 6.3: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title> 公 司 介绍 页 面 </title> 
<link href="css/common.css" rel="stylesheet" type="text/css" /> 
</head> 


<| 


























<hl> 公 司 介绍 </hl> 
<hr> 
<img src="image/pic.jpg" width="480" height="108" alt=" 公 司 logo "/> 


<p> 目 前 ， 新 迈 尔 (北京 ) 科技 有 限 公司 有 <strong>4</strong> 个 学 院 、 分 别 为 :<strong> 电 | 
子 商 务 学 院 </strong>， <strong> 数 字 艺 术 学 院 </strong>，<strong> 互 联网 + 学 院 </strong> 和 <strong> 智 能 制 | 


造 学 院 </strong>。</p> 


<p> 新 迈 尔 (北京) 科技 有 限 公司 成 立 于 2015 年 ， 坐 落 于 北京 市 海淀 区 中 关 村 软件 园 ， 是 | 
一 家 集 职业 教育 、 职业 培训 和 国际 教育 三 大 事业 集群 于 一 体 ， 致 力 于 将 领先 的 前 沿 科技 转化 为 教育 成 果 ， | 
通过 高 品质 的 教育 进行 信息 化 产业 的 人 才 培 养 ， 以 服务 战略 新 兴 产 业 领 域 的 科技 企业 ， 公 司 以 政府 、 高 | 
校 及 中 关 村 战略 新 兴 产 业 领 军 企业 为 依托 ， 同 中 关 村 数 百 家 具有 代表 性 企业 的 一 线 经 理 、 高 级 研发 人 员 | 
等 组 成 专业 实 训 团 队 、 课 程 研发 团队 和 讲师 团队 ， 与 高 校 开展 深入 合作 ， 培 养 信息 技术 类 技能 型 、 应 用 | 


型 、 复 合 型 专业 人 才 。</p> 
<p> 新 迈 尔 职业 教育 产品 研发 立足 于 中 国 经 济 社会 发 展 对 人 才 的 需求 ， 面 向 战略 新 兴 产 业 、 


前 沿 科技 和 互联 网 + 领域 ， 打 造 了 由 营销 学 院 、 数 字 艺 术 学 院 、 互 联网 + 学 院 和 智能 制造 学 院 构成 的 四 大 
学 院 和 矩阵， 覆盖 了 创新 创业 、 电 子 商 务 、 互 联网 营销 、 跨 境 电 商 、UI 设计 、UE 交互 设计 、Web 前 端 开 | 
发 、 互 联网 金融 、 大 数据 、 虚 拟 现实 VR)、 物 联网 应 用 、 网 络 运 维 与 信息 安全 、 智 能 制造 、 机 器 人 等 | 
专业 ， 形 成 了 适用 于 本 科 、 高 职 、 中 职 等 不 同 层次 院 校 的 课程 体系 和 人 才 培 养 方案 ， 并 可 根据 高 校 和 企 | 


业 需 求 进行 动态 调整 ， 提 供 随 需 而 变 的 课程 或 专业 体系 解决 方案 ， 实 现 对 各 行业 领域 的 可 扩展 性 覆盖 。 
<p> 
</body> 
</html> 
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现在 使 用 color 属性 设置 标题 字体 颜色 为 蓝 色 、 页 面 粗 体 强调 部 分 颜色 为 红色 ，CSS 


| 代码 如 下 所 示 。 
了 | hl {color:#091CC4:font-size:24px:} 
又 | | pi{font-size:16px;} 
| Pp strong{color:#FF0000;} 
Note 
| 读者 在 浏览 器 中 可 查看 页 面 效 果 ， 标 题字 体 颜色 为 蓝 色 ， 页 面 数字 颜色 为 红色 。 
2. 水 平 对 齐 


| 在 CSS 中 ,文本 的 水 平 对 齐 是 通过 text-align 属性 来 控制 的 ， 通 过 它 可 以 设置 文本 左 
| 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 端 对 齐 。textralign 属性 常用 值 如 表 6.4 所 示 。 


表 6.4 text-align 属性 常用 值 


把 文本 排列 到 左边 ， 默 认 值 ， 由 浏览 器 决定 


把 文本 排列 到 右边 

把 文本 排列 到 中 间 

实现 两 端 对 齐 文本 效果 
| 通常 浏览 网 页 新 闻 页 面 时 会 发 现 ， 标 题 居 中 显示 ， 新 闻 来 源 会 居中 或 居 右 显示 ， 而 前 
| 面 的 总 裁 致 辞 页 面 的 所 有 内 容 均 是 默认 居 左 显示 ， 现 在 通过 text-align 属性 设置 标题 居中 显 
| 示 ， 来 源 居 右 显示 ， 致 辞 内 容 居 左 显示 ，CSS 代码 如 下 所 示 。 
| hl {color:#091CC4:font-size:24px; text-align:center;} 


h3 {text-align:right:;font-style:normal;} 
p{font-size:12px:text-align:left:} 





Pp span{color:#F00;} 
在 浏览 器 中 查看 页 面 效果 如 图 6.6 所 示 ， 各 部 分 内 容 显 示 效 果 与 CSS 设置 效果 完 





| 全 一 致 . 








图 6.6 水 平 对 齐 效果 图 


3. 首 行 缩 进 
| 在 使 用 Word 编辑 文档 时 ， 通 常会 设置 段落 的 行距 ， 并 且 段 落 的 首 行 缩 进 两 个 字符 ， 
| 在 CSS 中 也 有 这 样 的 属性 来 实现 对 应 的 功能 。CSS 中 通过 line-height 属性 来 设置 行 高 ， 通 
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过 text-indent 属性 设置 首 行 缩 进 。 | 

line-height 属性 的 值 与 font-size 的 属性 值 一 样 ， 也 是 以 数字 来 表示 的 ， 单 位 也 是 px。 | 
除了 使 用 像素 表示 行 高 外 ， 也 可 以 不 加 任何 单位 ， 按 倍数 表示 ， 这 时 行 高 是 字体 大 小 的 倍 | 
数 。 例 如 ，<p> 标 签 中 的 字体 大 小 设置 为 12px， 它 的 行 高 设置 为 “line-height:12px:”。 

在 CSS 中 ，text-indent 直接 将 缩 进 距离 以 数字 表示 ， 单 位 为 em 或 px。 但 是 对 于 中 文 ， 
网 页 ，em 用 得 较 多 ， 通 常设 置 为 “2em”， 表 示 缩 进 两 个 字符 ， 如 p{text-indent:2em:} 。 | Note 
这 里 缩 进 距离 的 单位 em 是 相对 单位 ， 其 表示 的 长 度 相当 于 本 行 中 字符 的 倍数 。 无 论 
字体 的 大 小 如 何 变 化 ， 它 都 会 根据 字符 的 大 小 ， 自 动 适 应 ， 空 出 设置 字符 的 倍数 。 | 

按照 中 文 排版 的 习惯 ,通常 要 求 段 首 缩 进 两 个 字符 ， 因 此 ， 在 进行 段落 排版 ， 通 过 
text-indent 属性 设置 段落 缩 进 时 ， 使 用 em 为 单位 的 值 ， 再 合适 不 过 了 。 | 

根据 中 文 排版 习惯 ， 上 面 总 裁 致 辞 页 面 段 首 没有 缩 进 ， 并 且 行 与 行 之 间 没 有 距离 ， 显 | 
得 非常 拥挤 ， 那 么 这 两 个 属性 就 派 上 用 场 了 。CSS 代码 如 下 所 示 。 | 

hl {color:#091CC4: font-size:24px: text-align:center:} 

h3 {text-align:right: font:12px normal:} 

pftont-size:12px: text-align:left: line-height:20px; text-indent:2em:} 

Pp span{color:#F00;} | 

在 浏览 器 中 查看 的 页 面 效 果 如 图 6.7 所 示 ， 每 段 的 开始 缩 进 了 两 个 字符 ， 并 且 行 与 行 | 
之 间 有 了 一 定 的 间隙 ， 看 起 来 舒服 多 了 。 | 





























二 二 并 且 沁 


图 6.7 文本 缩 进 效果 图 

4. 文本 装饰 | 

网 页 中 经 常 发 现 一 些 文字 有 下 划 线 、 删 除 线 等 ， 这 些 都 是 文本 的 装饰 效果 。 在 CSS | 

中 是 通过 text-decoration 属性 来 设置 文本 装饰 ,如 表 6.5 所 示 列 出 了 text-decoration 常用 值 。 | 


表 6.5 ”text-decoration 常用 值 

















值 说 明 
none 默认 值 ， 定 义 的 标准 文本 
underline 设置 文本 的 下 划 线 
overline 设置 文本 的 上 划 线 
line-throu 设置 文本 的 删除 线 
blink 设置 文本 闪烁 。 此 值 只 在 Firefox 浏览 器 中 有 效 ， 在 下 中 无 效 
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| text-decoration 属性 通常 用 于 设置 超 链接 的 文本 装饰 , 因此 这 里 不 详细 讲解 , 大 家 知道 
| 每 个 值 的 用 法 即 可 。 在 后 面 讲解 使 用 CSS 设置 超 链接 样式 时 会 经 常用 到 这 些 属性 。 其 中 
| none 和 underline 是 最 常用 的 两 个 值 。 
































有 | | 5 委 直 对 齐 方式 
前 面 介绍 了 文本 的 水 平 对 齐 方式 ， 大 家 自然 会 想到 : 文本 在 垂直 方向 又 该 如 何 对 


| 齐 呢 ? 

| 在 CSS 中 通过 vertical-align 设置 垂直 方向 对 齐 方式 。 但 是 在 目前 的 浏览 器 中 ， 只 能 对 
| 表格 单元 格 中 的 对 象 使 用 垂直 对 齐 方式 属性 ， 而 对 于 一 般 的 标签 ， 如 <hl> 一 <h6> 和 <p> 及 
| 后 面 要 学 习 的 <div> 标 签 都 是 不 起 作用 的 , 因此 vertical-align 在 设置 文本 在 标签 中 垂直 对 齐 
时 并 不 常用 ， 它 反而 经 常用 来 设置 图 片 与 文本 的 对 齐 方式 。 

| 在 网 页 实际 应 用 中 ， 通 常 使 用 vertical-align 属性 设置 文本 与 图 片 的 居中 对 齐 ， 此 时 它 
| 的 值 为 middle， 如 示例 6.4 所 示 设置 图 片 与 文本 居中 对 齐 。 

| 示例 6.4: 





<!DOCTYPE html> 
<html lang="en'"> 
<head> 
| <meta charset="UTF-8"> 
| <title>Title</title> 
| <style type="text/css"> 
Pp img{vertical-align: middle:} 


<p><img src="img/pic.png"> 半 身 裙 </p> 
</body> 
</html> 


在 浏览 器 中 查看 的 页 面 效果 如 图 6.8 所 示 ， 实 现 了 图 片 与 文本 居中 对 齐 。 


图 6.8 图片 与 文本 居中 对 齐 效 果 图 


除了 middle 之 外 ，vertical-align 属性 还 有 其 他 值 (如 top 和 bottom 等 )， 只 是 这 些 值 
并 不 常用 ， 因 此 这 里 不 多 做 介绍 。 
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6.2 使 用 CSS 设置 超 链接 


超 链 接 在 本 质 上 属于 网 页 的 一 部 分 ， 它 是 一 种 允许 同 其 他 网 页 或 站 点 之 间 进 行 连接 的 ， E 
元 素 。 各 个 网 页 链接 在 一 起 后 ， 才 能 真正 构成 一 个 网 站 。 所 谓 的 超 链接 是 指 从 一 个 网 页 指 基业 (人 :2 
向 一 个 目标 的 链接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 网 页 上 的 不 同位 置 ， 

还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 而 在 一 个 网 页 ， 
中 用 来 超 链 接 的 对 象 ， 可 以 是 一 段 文本 或 者 是 一 个 图 片 ， 当 浏览 者 单 击 已 经 链接 的 文字 或 | 
图 片 后 ， 链 接 目标 将 显示 在 浏览 器 上 ， 并 且 根 据 目标 的 类 型 来 打开 或 运行 。 

按照 链接 路 径 的 不 同 ， 网 页 中 超 链接 一 般 分 为 以 下 3 种 类 型 ， 内 部 链接 、 锚 点 链接 和 
外 部 链接 。 

如 果 按 照 使 用 对 象 的 不 同 , 网 页 中 的 链接 又 可 以 分 为 : 文本 超 链接 、 图 像 超 链接 、E-mail 
链接 、 锚 点 链接 、 多 媒体 文件 链接 和 空 链接 等 | 

在 任何 一 个 网 页 上 ， 超 链接 都 是 最 基本 的 元 素 ， 通 过 超 链接 能 够 实现 页 面 的 跳 转 、 功 | 
能 的 激活 等 ,因此 超 链接 也 是 与 用 户 打交道 最 多 的 元 素 之 一 。 下 面 介绍 如 何 使 用 CSS 设置 | 
超 链接 的 样式 。 


6.2.1 超 链接 伪 类 


在 前 面 的 章节 已 经 学 习 了 超 链接 的 用 法 , 作为 HTML 中 常用 的 标签 , 超 链 接 的 样式 有 | 
其 显著 的 特殊 性 : 当 为 某 文 本 或 图 片 设置 超 链接 时 ， 文 本 或 图 片 标签 将 继承 超 链 接 的 默认 | 
样式 。 如 图 6.9 所 示 ， 文 字 添加 超 链接 后 将 出 现下 划 线 ， 图 片 添加 超 链接 后 将 出 现 边框 ， | 
单 击 链接 前 为 文本 颜色 为 黑色 ， 单 击 后 文本 颜色 为 红色 。 | 
超 链接 单 击 前 和 单 击 后 的 不 同 颜色 ， 其 实 是 超 链接 的 默认 伪 类 样式 。 所 谓 伪 类 ， 就 是 
不 根据 名 称 、 属 性 、 内 容 而 根据 标签 处 于 某 种 行为 或 状态 时 的 特征 来 修饰 样式 ， 也 就 是 说 | 
超 链接 将 根据 用 户 未 单 击 访问 前 、 鼠 标 悬 浮 在 超 链 接 上 、 单 击 未 释放 和 单 击 访问 后 的 4 个 
状态 显示 不 同 的 超 链接 样式 。 伪 类 样式 的 基本 语法 为 “标签 名 : 伪 类 名 {声明 ;}”， 如 图 6.10 | 
所 示 。 

















福建 特产 肉松 饼干 友 匡 金 丝 岭 松 饼 


a : hover { color:#61E461; } 


福建 特产 肉松 饼干 友 甘 金 毕 肉松 饼 








38gxl 包 ¥1.18 
图 6.9 超 链接 默认 特性 6.10 ” 伪 类 语法 结构 
最 常用 的 超 链接 伪 类 如 表 6.6 所 示 。 
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表 6.6 ” 超 链接 伪 类 
伪 类 名 称 含义 示例 
a:link 未 单 击 访问 前 超 链 接 样式 a:link {color-#9EFSF9;} 
aivisited 单 击 访问 后 超 链接 样式 aivisited {color:#333;} 
a:hover 鼠标 悬浮 其 上 的 超 链接 样式 ahover{color#FF7300:} 
a:active 鼠标 单 击 未 释放 的 超 链接 样式 a:active {color:#999: 


既然 超 链接 伪 类 有 4 种 ， 那 么 在 对 超 链接 设置 样式 时 ， 有 没有 顺序 区 别 ? 当然 有 了 ， 


| 在 CSS 设置 伪 类 的 顺序 为 a:link 一 a:visited 一 a:hover 一 a:active， 如 果 先 设置 a:hover 再 设置 
| arvisited， 在 下 浏览 器 中 a:hover 就 不 起 作用 了 。 




















现在 想 一 个 问题 , 如 果 设置 4 种 超 链接 样式 , 那么 页 面 上 超 链接 的 文本 样式 就 有 4 种 ， 


这样 就 与 大 家 测 览 网 页 时 常见 的 超 链接 样式 不 ~ 一 样 了 ， 大 家 在 上 网 时 看 到 的 超 链接 无 论 单 
| 击 前 还 是 单 击 后 样式 都 是 一 样 的 ， 只 有 鼠标 悬浮 在 超 链接 上 的 样式 有 所 改变 ， 为 什么 ? 





初学 者 可 能 认为 ，a:hover 设置 一 种 样式 ， 其 他 3 种 伪 类 设置 一 种 样式 。 是 的 ， 这 样 设 


| 置 确实 能 实现 网 上 常见 的 超 链接 设置 效果 ， 但 是 在 实际 的 开发 中 是 不 会 0 实际 
| 页 面 开发 中 ， 仅 设置 两 种 超 链接 样式 ， 一 种 是 超 链接 <a> 标 签 选 择 器 样式 ， 另 一 种 是 鼠标 
| 悬浮 在 超 链接 上 的 样式 ， 代 码 如 示例 6.5 所 示 。 


示例 6.5: 


<!COCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
img{ 
border:Opx; 


pt{ 
font-size:12px: 
} 
al{ 
color:#000; 
text-decoration:none: 
站 
ahover { 
color:#B46210: 
text-decoration:underline: 
} 
/*span{cursor:pointer:} */ 
</style> 
</head> 
<body> 
<p><a hre 仁 "#"><img src="img/cook.png” alt=" 肉 松 饼 干 "/></a></p> 
<p><a hre 伍 "#"> 福 建 特产 肉松 饼干 </a>&nbsp;&nbsp;<a hre 伍 "#"> 友 臣 金 丝 肉 松 饼 </a></p> 
<p><span>38gx1l 包 王 1.18</span></p> 
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</body> 

</html> 

在 浏览 器 中 查看 的 页 面 效 果 如 图 6.11 所 示 , 鼠标 悬浮 在 超 
链接 上 时 显示 下 划 线 ， 并 且 字 体 颜色 为 名 46210， 鼠 标 没 有 悬 
浮 在 超 链接 上 时 无 下 划 线 ， 字 体 颜 色 为 黑色 。 

a 标签 选择 器 样式 表示 超 链接 在 任何 状态 下 都 是 这 种 样 
式 ， 而 之 后 设置 ahover 超 链接 样式 ， 表 示 当 鼠标 悬浮 在 超 链 
接 上 时 显示 的 样式 ， 这 样 既 减少 了 代码 量 ， 使 代码 看 起 来 一 目 
了 然 ， 也 实现 了 想 要 的 效果 。 Dp 


6.2.2 使 用 CSS 设置 鼠标 滑 过 形状 图 6.11 超 链接 样式 效果 图 


在 浏览 网 页 时 ， 通 常 看 到 的 鼠标 指针 形状 有 第 头 、 手 形 和 工 字形 ， 这 些 效果 都 是 CSS 
通过 cursor 属性 设置 的 各 式 各 样 的 鼠标 指针 样式 。cursor 属性 可 以 在 任何 选择 器 中 使 用 ， 
来 改变 各 种 页 面 元 素 的 鼠标 指针 效果 。cursor 属性 常用 值 如 表 6.7 所 示 。 


表 6.7 cursor 属性 常用 值 
crosshair | 
cursor 属性 的 值 有 许多 ， 根 据 页 面 制 作 的 需要 来 选择 使 用 合适 的 值 即 可 。 但 是 在 实际 | 
网 页 制作 中 ， 常 用 的 属性 只 有 pointer， 它 通常 用 于 设置 按钮 的 鼠标 形状 , 或 者 设置 菜 些 文 | 
本 在 鼠标 悬浮 时 的 形状 。 例 如 ， 当 鼠标 移 至 示例 6.5 页 面 中 没有 加 超 链接 文本 上 时 ， 鼠 标 | 
呈现 手 状 ， 则 需要 为 页 面 中 <span> 标 签 增加 如 下 所 示 CSS 代码 。 | 


span{cursor:pointer;} 


在 浏览 器 查看 页 面 的 效果 如 图 6.12 所 示 ， 当 鼠标 移 至 文本 “38gxl 包 习 .18” 上 时 ， 
鼠标 变 成 了 手 状 。 


福建 特产 肉松 饼干 友 巨 金 丝 肉松 饼 








福建 特产 肉松 饼干 友 臣 金 丝 肉 松 饼 
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图 6.12 鼠标 形状 
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6.3 使 用 CSS 设置 背景 样式 





在 上 网 时 能 看 到 各 种 各 样 的 页 面 背 景 (background)， 有 页 面 整体 的 图 像 背 景 、 颜 色 背 
景 ， 也 有 部 分 的 图 像 背景 、 颜 色 背 景 等 。 

人 网 页 中 无 处 不 在 , 如 图 6.13 所 示 的 Aero 
搜索 按钮 、 图 标 背 景 ， 如 图 6.14 所 示 的 文字 背景 、 标 题 背 景 、 图 片 背 景 、 列 表 背 景 ， 如 
图 6.15 所 示 的 页 面 整 体育 车 。 按钮 背景 ， 以 及 如 图 6.16 所 示 的 表格 背景 。 ps 
都 为 浏览 者 带 来 了 丰富 多 彩 的 视觉 感受 ， 以 及 良好 的 用 户 体验 。 


Note 
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第 三 阶段 (WUI) 
移动 互联 网 行业 的 设计 一 直 在 考验 设计 的 整体 功力 ，WUI 设 计 要 充分 吸引 访问 者 的 注意 力 ， 让 访问 者 产生 视觉 上 的 愉悦 感 。. 
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图 6.15 页 面 背景 
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工作 岗位 芯 业 单位 竺 加 联系 方式 


ues HF UR ou ey 
Utagitm 北京 市 绷 峰 广告 公司 7000 五 险 -全 。 138**8751 
UF 优 休 网 7000 五 险 -全 。 183r*4460 
USRiH 晤 北京 大 承 科技 有 限 公司 7500 五 险 一 全 152+%1171 
Ut 北京 妆 来 科技 有 限 公司 7500 五 险 -全 。 1589r*6431 
UERit 晤 北京 介 守 秒 科 技 有 限 公司 7500 五 险 一 全 。 188**1697 
Ut 导 搜 丑 际 文化 传 漠 北 京 有 限 公司 7000 五 险 一 全 。 188r*4786 
Uist 1 区 网 7500 五 险 一 全 。 188**2351 
UNRiH 东方 丹 事 北 芭 国际 文化 传媒 有 限 公司 800( 五 险 一 全 。 188"*7578 
URSHH 志和 二 短 北 京 文化 创 草 北京 创 且 有 限 公司 。 。 60000 反 成 。 188""3699 
UNSiH 安庆 于 剖 孝 请 一 对 一 700G 五 险 一 全 。 188""2555 


Usih 北京 所 大 王 美文 化 准 导 有限 公司 7500 五 辽 一 全 。 130""7753 


对 对 灶 对 


Uiigitm 北京 甘 图 设计 广 寺 设计 公司 7500 石 险 一 金 。 188*"*7875 





UNathH 北京 时 代 筑 湖 文 化 发 展 有 限 公司 B000 石 险 一 全 。 188***5252 


图 6.16 表格 背景 


通过 上 面 的 几 个 页 面 展 示 ， 可 以 看 到 背景 是 网 页 中 最 常用 的 一 种 技术 ， 无论 是 单纯 的 
背景 颜色 ， 还 是 背景 图 像 ， 都 能 为 整体 页 面 带 来 丰富 的 视觉 效果 。 既 然 背景 如 此 重要 ， 那 | 


么 下 面 就 详细 介绍 背景 在 网 页 中 的 应 用 。 
6.3.1 认识 <div> 标 签 


<div> 标 签 可 以 把 HTML 文档 分 割 成 独立 的 、 不 同 的 部 分 ， 因 此 使 用 <div> 标 签 来 进行 


网 页 布局 。 与 <p> 标 签 一 样 ，<div> 标 签 也 是 成 对 出 现 的 ， 语 法 如 下 : 
<div> 网 页 内 容 .……</div> 


一 对 没有 添加 内 容 和 CSS 样式 的 <div> 标 签 , 在 编辑 器 中 独占 一 行 。 只 有 在 使 用 了 CSS 
样式 后 ， 对 它 进行 美化 ， 它 才能 像 书籍 、 杂 志 版 面 的 信息 块 那样 ， 对 网 页 进行 排版 ， 制 作 | 


出 各 式 各 样 的 网 页 布局 来 。 此 外 ， 在 使 用 <div> 标 签 布局 页 面 时 ， 它 可 以 嵌 套 <div> 标 签 ， 
同时 也 可 以 嵌 套 列表 、 段 落 等 各 种 网 页 元 素 。 


本 章 将 认识 如 何 使 用 CSS 中 控制 网 页 元 素 宽 〈width) 和 高 (height) 的 两 个 属性 。 这 
两 个 属性 的 值 均 以 数字 表示 ， 单 位 为 px。 例如， 设置 页 面 中 class 名 称 为 header 的 <div> 


的 宽 和 高 ， 代 码 如 下 所 示 。 


.header { 
width:200px: 
height:280px: 

} 


6.3.2 ”背景 属性 


在 网 页 中 ， 背 景 包 括 背景 颜色 (background-color) 和 背景 图 像 (background- image) 
两 种 方式 。 
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1. 背景 颜色 

在 CSS 中 , 使 用 background-color 属性 设置 字体 、<div> 标 签 、 列 表 等 网 页 元 素 的 背景 
| 颜色 时 ， 与 color 属性 一 样 ， 也 是 用 十 六 进 制 的 方法 表示 背景 颜色 值 ， 但 是 它 有 一 个 特殊 

廊 二 | 值 一 一 transparent， 即 透明 的 意思 ， 它 是 background-color 属性 的 默认 值 。 

| 理解 了 background-color 属性 的 用 法 ， 现 在 制作 某 购物 网 站 的 商品 分 类 导航 ， 导 航标 

| 题 和 导航 内 容 使 用 不 同 的 颜色 显示 ， 页 面 的 HTML 代码 和 CSS 代码 如 示例 6.6 所 示 。 

示例 6.6: 




















<!DOCTYPE html> 
<html> 
| <head> 
<meta charset="UTF-8"> 
<fitle> 新 迈 尔 </title> 
</head> 
<body> 
<div class="wrap"> 
<hl> 商 品 分 类 </hl> 
<u> 
<l> 
<a hre 仁 "> 女装 </a> 
<a hre 仁 "> 男装 3</a> 
<a hre 伍 "> 内 衣 </a> 
</> 
<l> 
<a hre 伍 "> 鞋 靳 </a> 
<a hre 伍 "> 箱包 </a> 
<a hre 伍 "> 配件 </a> 
</> 
<l> 
<a hre 仁 "> 童装 </a> 
<a hre 仁 "> 孕 产 </a> 
</> 
<li> 
<a hre 仁 "> 家 电 </a> 
<a hre 仁 "> 数码 </a> 
<a hre 伍 "> 手机 </a> 
</> 
<l> 
<a hre 伍 ""> 美 妆 </a> 
<a hre 伍 "> 洗 护 </a> 
<a hre 伍 "> 保健 品 </a> 


| <l> 

! <a hre 伍 "> 珠宝 </a> 
<a hre 仁 "> 眼镜 </a> 
<a hre 伍 "> 手表 </a> 

</> 

<I> 
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<a hre 伍 "> 运动 </a> 
<a hre 全 "> 户外 </a> 
<a hre 伍 "> 乐器 </a> 





图 6.17 背景 颜色 页 面 效 果 

2. 背景 图 像 

在 网 页 中 不 仅 能 为 网 页 元 素 设置 背景 颜色 ， 还 可 以 使 用 图 片 设置 为 某 个 元 素 的 背景 ， 
如 整个 页 面 的 背景 使 用 一 张 图 片 设置 ， 方 法 是 background-image:url( 图 片 路 径 );。 | 

在 实际 工作 中 ， 图 片 路 径 通 常 写 相 对 路 径 ， 此 外 ，background-image 还 有 一 个 特殊 的 | 
值 ， 即 none， 表 示 不 显示 背景 图 像 ， 只 是 实际 工作 中 很 少 用 。 | 

CSS 中 使 用 background-image 属性 设置 网 页 元 素 的 背景 图 像 。 | 

在 网 页 中 设置 背景 图 像 时 ， 通 常会 有 背景 重复 (background-repeat) 和 背景 定位 
(background-position) 两 个 属性 一 起 使 用 ， 下 面 详细 介绍 这 两 个 属性 。 | 

(1) 背景 重复 方式 | 

当 只 设置 background-image 属性 时 ， 背 景 图 像 默 认 自 动向 水 平和 垂直 两 个 方向 重复 平 
铺 。 如 果 不 希 望 图 像 平 铺 ， 或 者 只 希望 图 像 沿 着 一 个 方向 平 铺 ， 使 用 background-repeat 属 
性 来 控制 ， 该 属性 有 4 个 值 来 实现 不 同 的 平 铺 方 式 。 | 

回 repeat: 沿 水 平和 垂直 两 个 方向 平 铺 。 

加 ”no-repeat: 不 平 铺 ， 即 背景 图 像 只 显示 一 次 。 

回 repeat-x: 只 沿 水 平方 向 平 铺 。 

回 ”repeat-y: 只 沿 垂直 方向 平 铺 。 | 

在 实际 工作 中 ，repeat 通常 用 于 较 小 图 片 平 铺 整 个 页 面 的 背景 或 铺 平 页 面 中 某 一 块 内 
容 的 区 域 ，no-repeat 通常 用 于 小 图 标的 显示 或 只 需要 显示 一 次 的 背景 图 像 :repeat-x 横 | 
向 平 铺 ， 通 常用 于 导航 背景 、 标 题 背 景 ，repeat-y 纵向 平 铺 ， 在 页 面 制 作 中 并 不 常用 。 | 
如 图 6.18 所 示 的 网 页 中 , 页 面 导航 使 用 渐变 蓝 色 的 背景 横向 平 铺 ; 左 侧 菜单 背景 的 小 图 标 
背景 均 显 示 一 次 。 
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谷 运 委 押 ”| 行 包 服务 “| 莽 著 所 市 | 所 站 引导 “| 将 政 常识 
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为 保 了 名 咕 晰 内 村 ， 请 下 载 安装 查 焉 书 - 


“天顺 杰 瑟 夺 网、 到 二 林村 远 秆 辣 的 公告 
“ 寺 桥 贤 局 关于 2017 年 1 月 10 已 至 2 月 27 日 间 基 分 话 守 列 千 和 相 时 停 运 的 公告 
“ 甘 汉 村 器 局 关于 2017 年 1 月 10 忆 至 2 月 22 日 同 部 分 放 客 列车 疾 时 党 运 的 公告 
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图 6.18 背景 图 像 重 复方 式 


(2) 背景 定位 
| 在 CSS 中 ,使 用 background-position 属性 来 设置 图 像 在 背景 中 的 定位 。 背 景 图 像 默 认 
| 从 被 添加 网 页 元 素 的 左上 角 开始 显示 , 但 也 可 以 使 用 background-position 属性 设置 背景 图 
| 像 出 现 的 位 置 ， 即 背景 出 现 一 定 的 偏 移 量 。 可 以 使 用 具体 数值 、 百 分 比 、 关 键 词 3 种 方 
| 式 表示 水 平和 垂直 方向 的 偏 移 量 ， 如 表 6.8 所 示 。 


表 6.8 background-position 属性 对 应 的 取 值 











| 

| 含义 示例 

| 。 人 人 | C1) 0px 0px (对 认 ， 表 示 从 左上 角 出 现 背景 图 像 ， 无 人 和) 
| ee 置 ， 第 一 个 值 表示 生 | “2 30px 40px〈 正 向 偏 移 ， 图 像 向 下 和 向 右 移动 ) 
WE 二 人 ”| (3) -50px -60px( 反 向 偏 移 ， 图 像 向 上 和 向 左 移动 ) 

| X% Y% ee 30% ”50%〈 垂 直方 向 居中 ， 水 平方 向 偏 移 30%) 
ee 使 用 水 平和 垂直 方向 的 关键 词 进行 自由 组 合 ， 如 省 略 ， 则 默认 
| XX、Y 方 向 | 关键 词 有 left、center ee ee 

| 关键 词 。 | 和 dght， 垂 直方 向 的 | ep “万 一 角 

| 关键 词 有 top、center 0 Botons 《在 十 和 出 现 》 

| i top 〈 上 方 水 平 居中 位 置 出 现 ) 


通过 对 设置 背景 图 像 位 置 的 了 解 ， 现 在 为 上 面 完成 的 商品 分 类 导航 添加 背景 图 标 、 为 
导航 标题 右 侧 添加 向 下 指示 的 三 角 箭 头 、 为 每 行 的 导航 菜单 添加 向 右 指示 的 三 角 箭头 ， 
HTML 代码 不 变 ， 在 CSS 中 添加 背景 图 像样 式 ， 添 加 的 代码 如 示例 6.7 所 示 。 

示例 6.7: 

.wrap{ 

width: 220px; 
} 
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-wrap hl{ 
height:30px; 
background: #FF0030; 
line-height:30px; 


font-size:16px; 全 F 


color: #FFF:; | 
background-image:url(../img/arrow-down.gif); 
background-repeat:no-repeat: 
background-position: 190px 10px: | 
} 
wrap li{ 
background: #F98A70: 
line-height:26px: 
background-image:url(../img/arrow-right.gif):; 
background-repeat:no-repeat; 
background-position: 150px 2px: 
} 
.wrap li af 
color: #FFF:; 
font-size: 14px; 
} 
在 浏览 器 中 查看 添加 了 背景 图 标的 页 面 效果 如 图 6.19 所 示 。 
从 上 述 代码 中 可 以 看 到 , 使 用 background 属性 可 以 减少 许 
多 代码 , 在 后 期 的 CSS 代码 维护 中 会 非常 方便 , 因此 建议 使 用 
background 属性 来 设置 背景 样式 。 


6.3.3 ”设置 超 链 接 背 景 




















会 用 到 超 链接 。 为 了 使 超 链接 元 素 更 加 美观 ，CSS 使 用 背景 颜 | 
色 或 背景 图 像 的 方式 设置 超 链 接 背 景 , 常用 的 有 如 图 6.20 所 示 的 按钮 背景 图 像 和 如 图 6.21 | 
所 示 的 导航 菜单 超 链 接 ， 这 些 都 是 网 页 中 常用 到 背景 样式 。 由 于 设置 按钮 背景 样式 和 导航 ， 
菜单 背景 样式 需要 用 到 盒子 模型 属性 、 浮 动 或 其 他 CSS 属性 ,因此 将 在 后 面 的 章节 中 详细 | 
介绍 这 两 种 设置 背景 样式 的 方法 。 | 





[un 
急 | 雪 |[Q| | 秃 


车 站 可 条。 中 二 可 可。 村 放 柯 间 。 下 职 点 吉明 关上 生 














图 6.20 按钮 背景 图 6.21 导航 菜单 超 链接 背景 
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6.4 使 用 CSS 设置 列表 样式 













| 网 页 中 当 遇 到 一 条 一 条 的 新 闻 或 是 很 多 条 数据 的 情况 下 , 就 会 用 到 列表 的 形式 。 例 如 ， 
| 横向 导航 菜单 、 竖 向 菜单 、 新 闻 列 表 、 商 品 分 类 列表 等 ， 基 本 都 是 使 用 ul-li 无 序列 表 实 现 
的 ， 如 示例 6.7 中 的 商品 分 类 。 但 是 和 实际 网 页 应 用 的 导航 菜单 〈 如 图 6.13 所 示 ) 相 比 ， 
| 样式 方面 比较 难看 ， 传 统 网 页 中 的 菜单 、 商 品 分 类 使 用 中 的 列表 均 没有 前 面 的 圆 点 符号 ， 
该 如 何 去 掉 这 个 默认 的 圆 点 符号 呢 ? 这 就 用 到 CSS 列表 属性 。 

CSS 列表 有 4 个 属性 来 设置 列表 样式 ， 分 别 是 list-style-type、list-style-image 、 
ist-style-position 和 list-style。 下 面 分 别 介绍 这 4 个 属性 。 






































| 6.4.1 list-style-type 
| list-style-type 属性 设置 列表 项 标记 的 类 型 ， 常 用 的 属性 值 如 表 6.9 所 示 。 
表 6.9 list-style-type 常用 属性 值 











值 说 有明 语法 示例 示 示 例 
none 无 标记 符号 list-style-type:none; ee 
disc 实心 圆 ， 默 认 类 型 list-style-type:disc; ® 0 
circle 空心 圆 list-style-type:circle; 
square 实心 正方 形 list-style-type:square; 
decimal 数字 list-style-type:decimal; 。 Se 


6.4.2 list-style-imag 


| list-style-image 属性 是 使 用 图 像 来 替换 列表 项 的 标记 ， 当 设置 了 list-style-image 后 ， 
| list-style-type 属性 都 将 不 起 作用 ， 页 面 中 仅 显示 图 像 标 记 。 但 是 在 实际 网 页 制作 中 ， 为 了 
| 防止 个 别 浏览 器 可 能 不 支持 list-style-image 属性 ， 都 会 设置 一 个 list-style-type 属性 以 防 图 
| 像 不 可 用 。 例 如 ， 把 某 图 像 设 置 为 列表 中 的 项 目标 记 ， 代 码 如 下 所 示 。 

| 

sO 
list-style-type:circle: 
} 





| 6.4.3 list-style-position 


list-style-position 属性 设置 在 何 处 放置 列表 项 标记 ， 它 有 两 个 值 ， 即 inside 和 outside。 
jj inside 表示 项 目标 记 放 置 在 文本 以 内 ， 且 环绕 文本 根据 标记 对 齐 ; outside 是 默认 值 ， 它 保 
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持 标 记 位 于 文本 的 左 侧 , 列表 项 标记 放置 在 文本 以 外 , 且 环 绕 文本 不 根据 标记 对 齐 。 例 如 ， 
设置 项 目标 记 在 文本 左 侧 ， 代 码 如 下 所 示 。 | 


hi{ | 4 
list-style-image:url(image/arrow-right.gif): | 良和 
list-style-type:circle: | 
list-style-position:outside: Note 

} | 


6.4.4 list-style 


与 背景 属性 一 样 ， 设 置 列表 样式 也 有 简写 属性 。list-style 简写 属性 表示 在 一 个 声明 中 | 
设置 所 有 列表 的 属性 。list-style 简写 按照 list-style-type 一 list-style-position 一 list-style-image | 
顺序 设置 属性 值 。 例 如 ， 上 面 的 代码 可 简写 如 下 。 | 

li 

ee outside url(image/arrow-right.gif): 

} | 

使 用 list-style 属性 设置 列表 样式 时 ， 可 以 不 设置 其 中 某 个 值 ， 未 设置 的 属性 会 使 用 默 | 
认 值 。 例 如 ，“list-style:circle outside; ”默认 没有 图 像 标记 。 | 
在 浏览 网 页 时 会 发 现 ， 用 到 列表 时 很 少 使 用 CSS 自 带 的 列表 标记 ， 而 是 设计 的 图 标 ， | 
那么 大 家 会 想 使 用 list-style-image 属性 就 可 以 了 .。 可 是 list-style-position 属性 不 能 准确 地 定 | 
位 图 像 标 记 的 位 置 ， 通 常 网 页 中 图 标的 位 置 都 是 非常 精确 的 。 因 此 在 实际 的 网 页 制作 中 ， | 
通常 使 用 list-style 或 list-style-type 设置 项 目 无 标记 符号 ， 然 后 通过 背景 图 像 的 方式 把 设计 | 
的 图 标 设置 成 列表 项 标记 。 所 以 在 网 页 制作 中 ，list-style 和 list-style-type 两 个 属性 是 经 常 | 
用 到 的 ， 而 另 两 个 属性 则 不 太 常用 ， 这 里 牢记 list-style 和 list-style-type 的 用 法 即 可 。 | 

现在 用 所 学 的 CSS 列表 属性 修改 示例 6.6， 把 商 中 分 类 中 前 面 默 认 列表 符号 去 掉 ， 并 | 
且 使 用 背景 图 像 设置 列表 前 的 背景 小 图 片 。 由 于 HTML 代码 没有 变 , 现在 仅 需要 修改 CSS | 
代码 ， 代 码 如 示例 6.8 所 示 。 

示例 6.8: 

#nav { 

width:230px; /# 最 外 层 <div> 的 宽度 4/ 
background-color:#D7D7D7; /# 最 外 层 <div> 背 景 颜 色 拟 


} 

title { 
background-color:#C00; 
font-size:18px; 
font-weight:bold:; 
color:#FFF:; 
text-indent: lem:; 
line-height:35px:; 
background-image:url(../img/arrow-down.gif); 
background-repeat:no-repeat: 
background-position:205px 10px: 
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} 

#nav ulli{ 
height:30px; 
line-height:25px: 
background-image:url(../img/arrow-right.gif); 
background-repeat:no-repeat: 
background-position:170px 2px; 


在 浏览 器 中 查看 的 页 面 效 果 如 图 6.22 所 示 ， 列 表 前 已 无 默认 的 列表 项 标记 符号 。 
列表 前 显示 了 设计 的 小 三 角 图 标 ， 通 过 代码 可 以 精确 地 设置 小 三 角 的 位 置 。 





商品 分 类 


| 0 女 甘 曙 划 3 册 衣 
| 0 些 丝 箱包 印 件 





65 技能 训练 


! 
| 
| 1 制作 “新 浪 最 新 消息 " 
| 需求 说 明 : 
| 利用 学 过 的 标题 标签 和 列表 制作 如 图 6.23 所 示 的 新 浪 最 新 消息 页 面 。 
| (1) 标题 和 消息 列表 文字 颜色 为 蓝 色 (#F3B7B)。 
| (2) 标题 字体 大 小 为 34px， 加 粗 显 示 ， 有 下 边框 。 

(3) 消息 列表 文字 大 小 为 14px， 行 距 为 24px， 鼠 标 滑 过 又 下 划 线 、 文 字 颜 色 为 红色 
(#8D0000 )。 

2 制作 新 迈 尔 -热点 新 闻 页 

需求 说 明 : 

制作 如 图 6.24 所 示 的 热点 新 闻 页 面 ， 页 面 要 求 如 下 。 

(1) 标题 字体 大 小 为 24px， 字 体 为 楷体 ， 居 中 加 粗 显 示 。 

(2) 发 布 时 间 ， 字 体 大 小 为 12px， 颜 色 值 为 各 49393， 居 中 显示 。 

(3) 文本 段落 字 大 小 为 14px， 行 高 为 20px， 首 行 缩 进 两 个 字符 。 
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要 半生 我 中 心 与 昆 工 大 、 博 仁 大 学 签约 
| + 无 人 上 
随 着 国 款 搞 空 业 的 飞速 发 展 ， 当 前 高 水 平 的 国 奈 化 空乘 服务 人 
养 者 量 和 质量 远 远 不 能 适应 行业 发 展 的 可 求 。 为 主动 适应 国 
际 级 空 事业 安 展 的 新 格局 
， 紧 毗 | 未 南 亚 航 宁 业 的 目标 定位 ， 满 足 社会 对 航 
字 尖 高 质量 服务 人 才 的 


必 扫 行 太 新 不 教育 棵 团 上 下 北京 五 名 拉 人 教育 投资 有 限 公司 ， 所 

四 发 挥 三 方 优势 ， 培 养 高 质量 的 国 未 化 空乘 人 员 。 

。 系 国 席 轮 倾覆 遇难 人 数 质 : 

和 居 公 布 最 新 让 区 名 音 名 将 
6 月 22 日 ,我 中 心 主任 车 云 月 、 副 主 任 对 洋 、 副 主任 张 吏 、 院 校 

合作 经 理 王冬梅 ， 员 明理 工大 学 校方 代表 冯 金 挥 ， 素 国情 仁 大 学 校 


™ MA Nt Weft 方 代表 典 和 及 . 拉 涯 吏 本 等 术 久 导 渤 行 了 宗 切 友好 的 会 次 














图 6.23 ”新 浪 最 新 消息 图 6.24 热点 新 闻 
3. 制作 宠物 狗 狗 页 面 
需求 说 明 : 
制作 如 图 6.25 所 示 的 宠物 狗 狗 页 面 ， 页 面 要 求 如 下 。 
(1) 页 面 中 所 有 字体 颜色 值 为 #9C2F06。 
(2) 标题 字体 大 小 为 18px， 行 距 40px， 加 粗 显示 。 
(3) 正文 内 容 字体 大 小 为 12px， 行 距 20px; 图 片 与 文本 居中 对 齐 显 示 。 
(4) 使 用 外 部 样式 表 创 建 页 面 样式 。 





ME x 


了 ， 泡 开 了 给 他 喂 。 这 样 有 利于 消化 。 能 吃 是 好 事情 。 但 是 





2. 断 奶 后 ， 少 食 多 咀 便 于 狗 狗 的 营养 吸收 ， 一 天 3-4 次 就 可 以 了 。 





3. 一 定 要 把 粮 泡 开 ， 泡 软 给 他 吃 。 分 县 就 是 你 用 手 抓 的 








候 加 上 半 个 馈 错 或 者 锅 盔 之 类 的 和 狗 粮 混在 一 起 嘿 给 他 吃 ， 缕 鲜 生 胜 和 肝脏 的 运 云 动 ， 





图 6.25 ”宠物 狗 狗 


4. 制作 新 闻 详 情 页 
需求 说 明 : 
制作 如 图 6.26 所 示 的 新 迈 尔 新 闻 详 情 页 面 ， 页 面 要 求 如 下 。 
(1) 标题 字体 大 小 为 18px， 行 距 40px， 加 粗 显 示 。 
(2) 新 闻 内 容 每 段 的 首 行 缩 进 两 个 汉字 ， 行 距 20px。 
(3) 使 用 外 部 样式 表 创建 页 面 样式 。 

5. 制作 电器 分 类 页 面 

需求 说 明 : 


| 
| 
| 
| 
| 
| 
怎么 养 好 一 只 狗 狗 ? 
| 
| 
制作 如 图 6.27 所 示 的 家 用 电器 分 类 页 面 ， 页 面 要 求 如 下 。 | 


ei 


Note 








| 向 内 缩 进 一 个 字符 。 





我 中 心 与 民工 大 、 傅 仁 大 学 签约 


内 和， 水 玖 人 和 和 人 六 的 人 
王 动 适应 国际 上 空 事业 才 展 的 
东 


大 学 、 带 国 卫 大学、 多 
人 


| 
大 学 校方 代 表 红 有 休 , 拉 
A 
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-了 CD WeyCYUserywwwDesxtop/W 惠 XFF/Unit 本 | 











图 6.26 新 闻 详 情 页 


本 章 总 


回 ”CSS 对 网 页 文本 的 设置 。 
回 CSS 中 伪 类 的 使 用 和 设置 鼠标 滑 过 文本 或 图 片 的 形状 。 
回 “CSS 对 网 页 元 素 背景 的 设置 。 








(1) 标题 字体 大 小 为 18px、 白 色 、 加 粗 显示 , 行距 为 35px; 背景 为 黄色 ( 邱 CDD72) 


pe (2) 电器 分 类 字体 大 小 为 14px、 加 粗 显 示 ， 行距 为 30px， 背 景 为 浅黄 色 (#EF89B)， 
| 电器 分 类 超 链接 字体 颜色 为 蓝 色 (#0F7CBF)， 无 下 划 线 ， 当 鼠标 悬浮 于 超 链 接 上 时 出 现下 
| 划 线 。 
(3) 分 类 内 容 字 体 大 小 为 12px， 行 距 20px， 超 链接 字体 颜色 为 灰色 (#666666)、 无 
下 划 线 ， 当 鼠标 悬浮 于 超 链 接 上 时 字体 颜色 为 棕 红 色 ( 盾 60)， 并 且 显 示 下 划 线 。 





图 6.27 所 有 食品 分 类 页 面 








第 77/ 章 
盒子 模型 


本 章 简介 


HTML 中 的 每 一 个 元 素 都 可 以 理解 为 是 一 个 盒子 。 因此 ，HTML 页 面 实际 上 就 是 由 一 
推 盒子 组 成 的 。 默 认 情况 下 ， 每 个 盒子 的 边框 不 可 见 、 背 景 也 是 透明 的 ， 所 以 不 能 直接 看 
到 页 面 中 盒子 的 结构 。 使 用 浏览 器 的 Web Developer 工具 条 可 以 方便 地 显示 出 盒子 ， 从 而 
能 从 另外 一 个 角度 来 审视 页 面 的 构成 。 掌握 了 盒子 模型 的 概念 及 用 法 ,再 看 网 上 的 页 面 时 ， 
会 惊奇 地 发 现 ， 售 子 模型 在 网 页 上 的 应 用 无 处 不 在 。 

盒子 模型 是 CSS 控制 页 面 的 一 个 很 重要 的 概念 。 只 要 用 到 DIV 布局 页 面 ， 那 么 必然 
会 用 到 盒子 模型 的 知识 。 所 以 掌握 了 盒子 模型 的 属性 及 用 法 ， 才 能 真正 地 控制 好 页 面 中 的 
各 个 元 素 。 

本 章 主要 介绍 盒子 模型 的 基本 概念 ， 盒 子 模型 的 边框 、 内 边 距 和 外 边 距 ， 以 及 它们 在 
网 页 中 的 实际 应 用 ， 最 后 介绍 标准 文档 流 和 display 属性 在 网 页 中 的 用 法 。 


本 章 工作 任务 | 


> ”制作 注册 页 面 
> ”制作 商品 分 类 模块 
> ”制作 课程 导航 模块 


EE 


理解 盒子 模型 及 其 构成 
会 使 用 金子 属性 美化 网 页 元 素 
会 计算 金子 模型 十 


VyvyvYv 
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> ”理解 标准 文档 流 及 其 组 成 和 特点 
> 会 使 用 display 属性 设置 元 素 显示 方式 


请 在 预习 时 找 出 下 列 单词 在 本 章 中 的 用 法 ， 了解 它 们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
border 

margin, 

padding. 

display. 

block 





none, 
inline, 


”| 预习 并 回答 以 下 问题 


1. 如 何 设置 一 个 <li> 标 签 下 边框 的 样式 为 1px 的 蓝 色 虚 线 ? 
| 2. 如 何 计算 金子 模型 的 总 尺寸 ? 
| 3. 如 何在 CSS 中 设置 一 个 元 素 在 页 面 中 不 显示 ? 


7.1 盒子 模型 


| 设计 网 页 过 程 中 经 常 听 到 的 属性 名 : 内 容 (content)、 填 充 (padding)、 边 框 (border) 
| 和 边界 (margin)，CSS 和 模型 都 具备 这 些 属性 。 可 以 把 这 些 属性 转移 到 日 常生 活 中 的 盒子 
| (箱子) 上 来 理解 ,日常 生活 中 所 见 的 盒子 也 就 是 能 装 东西 的 一 种 箱子 , 也 具有 这 些 属性 ， 
| 天 以 称 为 盒子 模型 -CSS 盒子 模型 是 在 网 页 设计 中 经 常用 的 CSS 技术 所 使 用 的 一 种 思维 模 
| 型 。 在 控制 页 面 方面 ， 盒 子 模型 有 着 至 关 重 要 的 作用 ， 熟 练 掌握 盒子 模型 及 其 属性 ， 是 控 
| 制 页 面 中 每 个 HTML 元 素 的 前 提 。 


| 7.1.1 盒子 模型 的 概念 


盒子 的 概念 在 生活 中 随处 可 见 。 如 图 7.1 所 示 的 化 妆 品 包装 盒 ， 化 妆 品 是 最 终 运输 的 
物品 ， 四 周一 般 会 添加 用 于 抗震 的 填充 材料 ， 填 充 材 料 的 外 层 是 包装 用 的 纸 壳 。 

在 CSS 中 , 所 有 的 页 面 元 素 都 包含 在 一 个 矩形 框 内 ， 称 为 盒子 。 盒 子 模 型 是 由 margin 
(外 边框 )、border (边框 )、padding (内 边框 ) 和 content (内容) 几 个 属性 组 成 的 。 此 外 ， 
| 在 盒子 模型 中 ， 还 具备 高 度 和 宽度 两 个 辅助 属性 。 盒 子 模型 平面 结构 如 图 7.2 所 示 。 
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图 7.1 生活 中 的 盒子 模型 图 7.2 盒子 模型 平面 结构 图 


CSS 中 盒子 模型 的 概念 与 此 类 似 ，CSS 将 网 页 中 所 有 元 素 都 看 成 一 个 个 盒子 。 图 7.3 
所 示 的 网 页 中 显示 一 幅 图 片 ， 它 被 放 在 一 个 <div> 中 ，<div> 设 置 了 一 个 背景 色 和 一 个 虚 边 | 
线 , 里面 的 图 片 与 <div> 的 边沿 有 一 定 的 距离 , 并且 <div> 与 浏览 器 的 边沿 也 有 一 定 的 距离 ， | 
这 些 距 离 与 <div>、 图 片 就 构成 了 一 个 网 页 中 的 盒子 模型 结构 。 也 就 是 说 , <div> 虚 线 、<div> | 
与 浏览 器 的 距离 和 <div> 与 图 片 的 距离 就 是 由 于 盒子 模型 的 属性 形成 的 。 盒 子 模型 属性 有 | 
边框 、 内 边 距 和 外 边 距 。 
由 以 上 可 以 看 出 ， 盒 子 模型 包含 如 下 4 个 部 分 。 
加 ”content (内 容 ): 是 盒子 模型 中 必需 的 一 部 分 ， 可 以 是 文字 、 图 片 等 元 素 。 
回 padding (空白 ): 也 称 内 边 距 或 补 白 ， 用 来 设置 内 容 和 边框 直接 的 距离 。 
回 ”border (边框 ): 可 以 设置 内 容 边框 线 的 粗细 、 颜 色 和 样式 等 。 
回 “margin (边界 )， 外 边 距 ， 用 来 设置 内 容 与 内 容 之 间 的 距离 。 | 
一 个 盒子 的 实际 高 度 (宽度 ) 是 由 content + padding + border + margin 组 成 的 。 在 CSS | 
中 ， 可 以 通过 设 定 width 和 height 来 控制 content 的 大 小 ， 并 且 对 于 任何 一 个 盒子 ， 都 可 以 
分 别 设 定 4 条 边 的 border、padding 和 margin。 | 
盒子 模型 除 平面 结构 图 外 ， 还 包括 三 维 的 立体 结构 图 ， 如 图 7.4 所 示 ， 从 上 往 下 看 ， 
它 表 示 的 层次 关系 依次 如 下 。 

















图 7.3 网 页 中 的 盒子 图 7.4 盒子 模型 的 三 维 立体 结构 示意 图 
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Note 
里 可 以 看 出 ， 若 对 某 个 页 面 元 素 同 时 设置 背景 图 像 和 背景 颜色 ， 则 背景 图 像 将 在 背景 颜色 
| 的 上 方 显示 。 


(1) 首先 是 盒子 的 主要 标识 : 边框 (border)， 位 于 盒子 第 一 层 。 

(2) 其 次 是 元 素 内 容 (content)、 内 边 距 (padding)， 两 者 同位 于 第 二 层 。 

(3) 再 次 是 前 面 着 重 讲解 的 背景 图 (background-image)， 位 于 第 三 层 。 

(4) 背景 色 (background-color) 位 于 第 四 层 。 

(5) 最 后 是 整个 盒子 的 外 边 距 (margin)。 

在 网 页 中 看 到 的 页 面 内 容 ， 都 是 盒子 模型 的 三 维 立 体 结构 多 层 琶 加 的 最 终 效 果 ， 从 这 





下 面 重点 介绍 盒子 模型 的 几 个 属性 。 在 以 后 的 页 面 制作 中 ， 能 够 游 思 有 余地 应 用 这 些 





| 属性 ， 制 作出 精美 的 网 页 。 
7.1.2 边框 


边框 (border) 有 3 个 属性 ， 分 别 是 color (颜色 )、width〈 粗 细 ) 和 style (样式 )。 网 





页 中 设置 边框 样式 时 , 常常 需要 将 这 3 个 属性 很 好 地 配合 起 来 , 才能 达到 良好 的 页 面 效 果 。 
| 在 使 用 CSS 设置 边框 的 时 候 , 分 别 使 用 border-color、border-width 和 border-style 设置 边框 
| 的 颜色 、 粗 细 和 样式 。 














1. border-color 


border-color 的 设置 方法 与 文本 的 color 属性 或 背景 颜色 background-color 属性 完全 一 


| 样 ， 也 是 使 用 十 六 进 制 设置 边框 的 颜色 ， 如 红色 为 姓 F0000。 


由 于 盒子 模型 分 为 上 、 下 、 左 、 右 4 个 边框 ， 所 以 在 设置 边框 颜色 时 ， 按 上 下 左右 的 


顺序 或 同时 设置 4 个 边框 的 颜色 。border-color 属性 的 设置 方式 如 表 7.1 所 示 。 


表 7.1 border-color 属性 设置 方法 








属 性 说 了 明 示例 
border-top-color 设置 上 边框 颜色 border-top-color:#369: 
border-right-color 设置 右边 框 颜色 border-right-color:#369; 
border-bottom-color 设置 下 边框 颜色 border-bottom-color:#f AE45B;: 
border-left-color 设置 左边 框 颜色 border-left-color:#EFCD56; 

设置 4 个 边框 为 同一 颜色 border-color#EEFF34: 

el i border-color:#369 #000; 

左右 边框 颜色 为 #000 
border-color EE 

左 、 右 边框 颜色 为 #000 border-color:#369 #000 #00; 

下 边框 颜色 为 #00 

上 、 右 、 下 、 左 边框 颜色 分 别 

为 #369、#000、 扼 00、#0F border-color:#369 #000 #F00 #00F:; 





使 用 border-color 属性 同时 设置 4 条 边框 的 颜色 时 ,设置 顺序 按 顺 时 针 方向 “上 、 右 、 


| Rs 左 ” 设 置 边框 颜色 , 属性 值 之 间 , 以 空格 隔 开 。 例 如 , border-color:#369 #000 #00 #00F: 
| 369 对 应 上 边框， #000 对 应 右边 框 ， 手 00 对 应 下 边框 ，#00F 对 应 左边 框 。 
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2. border-width 


于- 


border-width 用 来 指定 border 的 粗细 程度 ， 它 的 值 有 thin、medium、thick 和 像素 值 。 


回回 因 回 


thin: 设置 细 的 边框 。 
medium: 默认 值 ， 设 置 中 等 的 边框 ， 一 般 的 浏览 器 都 将 其 解析 为 2px。 
thick: 设置 粗 的 边框 。 
像素 值 : 表示 具体 的 数值 ， 自 定义 设置 边框 的 宽度 ， 如 1px 和 5px 等 ， 使 用 像素 


为 单位 设置 border 粗细 程度 ， 是 网 页 中 最 常用 的 一 种 方式 。 
与 border-color 属性 一 样 ，border-width 属性 既 可 以 分 别 设置 4 个 边框 的 粗细 ， 


同时 设置 4 个 边框 的 粗细 。 下 面 以 像素 值 设置 为 例 ， 
表 7.2 border-width 属性 设置 


具体 设置 方法 如 表 7.2 所 示 。 


Note 


也 可 以 | 


属 性 说 了 明 示 例 
border-top-width 设置 上 边框 粗细 为 5px border-top-width: Spx: 
border-right-width 设置 右边 框 粗细 为 10px border-right-width: 10px: 
border-bottom-width 设置 下 边框 粗细 为 8px border-bottom-width:8px: 
border-left-width 设置 左边 框 粗细 为 22px border-left-width:22px; 

4 个 边框 粗细 都 为 5px border-width:Spx: 

上 下 边 粗细 为 20px 

左右 边 粗细 为 2px border-width:20px 2px; 

上 边框 粗细 为 5px 

border-width 
pe 左右 边框 粗细 为 1px border-width:5px 1px 6px; 

下 边框 粗细 为 6px 
上 、 右 、 下 、 左 边框 粗细 分 别 为 1px、 

Se border-width: 1px 3px Spx 2px; 





3. border-style | 

border-style 属性 用 来 指定 边框 的 样式 ， 它 的 值 有 none、hidden、dotted、dashed、solid、 | 
double、groove、ridge 和 outset 等 ， 其 中 none、dotted、dashed、solid 是 在 实际 网 页 制作 中 | 
经 常用 到 的 值 。none 表示 无 边框 ，dotted 表示 为 点 线 边框 ，dashed 表示 虚线 边框 ，solid 表 ， 
示 实 线 边框 。 由 于 dotted 和 dashed 在 大 多 数 浏览 器 中 显示 的 为 实 线 , 因此 在 实际 网 页 应 用 | 
中 ， 为 了 浏览 器 之 间 的 兼容 性 ， 常 用 的 值 基本 为 none 和 solid。 其 他 值 的 用 法 在 这 里 不 再 | 
详细 讲解 。 

与 border-color 和 border-width 一 样 , border-style 属性 也 是 既 可 以 分 别 设置 4 人 
样式 ， 也 可 以 同时 设置 4 个 边框 的 样式 。border-style 具体 设置 方法 如 表 7.3 所 示 。 














表 7.3 border-style 属性 设置 方法 












设置 上 边框 为 实 线 
设置 右边 框 为 实 线 
设置 下 边框 为 实 线 
设置 右边 框 为 实 线 










border-top-style 
border-right-style 
border-bottom-style 
border-left-style 


border-top-style:solid; 
border-right-style:solid; 
border-bottom-style:solid; 
border-left-style:solid: 











a 


+CSS 网 页 开发 与 制作 














属 性 说 明 示 例 
设置 4 个 边框 均 为 实 线 border-style:solid: 
上 下 边框 为 实 线 border-style:solid dotted; 
左右 边框 为 点 线 - 
border-style 上 边框 为 实 线 
左右 边框 为 点 线 border-style:solid dotted dashed: 
下 边框 为 虚线 


上 、 右 、 下 、 左 边框 分 别 为 


实 线 、 点 线 、 虚 线 、 双 线 border-style:solid dotted dashed double; 





4. border 简写 属性 
以 上 讲解 了 边框 的 border-color、border-width、border-style 这 3 个 属性 的 设置 方法 ， 
掌握 了 使 用 这 3 个 属性 设置 边框 的 颜色 、 粗 细 和 样式 。 其 实在 实际 的 网 页 制作 中 ， 通 常 使 
用 border-top、border-right、border-bottom 和 border-left 来 单独 设置 各 个 边框 的 样式 。 例 如 ， 
设置 某 网 页 元 素 的 下 边框 为 红色 、9px、 虚 线 显示 ， 代 码 如 下 。 
border-bottom: 9px #F00 dashed: 


同时 设置 3 个 属性 时 ，border-color、border-width、border-style 顺序 没有 限制 ， 可 以 任 








意 顺序 设置 ， 但 是 通常 的 顺序 为 粗细 、 颜 色 和 样式 。 


如 果 4 个 边框 的 样式 相同 ， 需 要 同时 设置 4 个 边框 的 样式 ， 直 接 使 用 border 属性 设置 


| 4 个 边框 的 样式 ， 代 码 如 下 所 示 。 


border: 9px #F00 dashed: 
这 名 代码 表示 某 网 页 元 素 的 4 个 边框 均 为 红色 、9px、 虚 线 显示 。 同 时 设置 4 个 边框 


的 3 个 属性 时 ， 这 3 个 属性 的 顺序 也 没有 限制 ， 并 且 使 用 border 同时 设置 4 个 边框 的 样式 
| 也 是 网 页 制作 中 经 常用 到 的 方法 。 


上 网 的 时 候 ， 可 以 看 到 注册 、 登 录 、 问 卷 调 查 页 面 中 的 文本 输入 框 的 样式 都 是 经 过 美 





化 的 ， 有 时 提交 、 注 册 按 钮 也 是 使 用 图 片 ， 这 些 都 是 使 用 了 border 属性 。 下 面 学 习 border 
| 属性 的 用 法 ， 制 作 一 个 注册 页 面 ， 代 码 如 示例 7.1 所 示 。 











示例 7.1: 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="GB2312" /> 
<title> 购 票 页 面 </title> 
<link href—"css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div class="regist"> 
<hl> 购 票 页 面 <hl> 
<form action="" method="post" name="myform"> 


Be 





<table width="100%" border="0" cellspacing="0" cellpadding="0"> 


<tr> 

<td class="leftTitle"> 姓 名 : </td> 

<td><input name="user" ="text" class="textInput"/></td> 
</tr> 
<tr> 


<td class="leftTitle"> 邮 箱 : </td> 
<td><input name="email" type="text" class="textInput"/></td> 
</t> | 
<tr> | 
<td class="leftTitle"> 联 系 电话 : </td> | 
<td><input name="tel" type="text" class="textInput"/></td> 
</tr> 
<tr> 
<td class="leftTitle">&nbsp:</td> 
<td><input name="" type="submit" value=" " class="btnRegist"/></td> 
</t> 


</body> 
</html> | 
使 用 CSS 设置 id 为 regist 的 <div> 的 边框 样式 为 ]px、 蓝 色 、 实 线 ， 标 题 背景 颜色 为 蓝 | 
色 ， 注 册 内 容 背景 颜色 为 浅 蓝 色 ， 文 本 输入 框 的 边框 样式 为 ]px、 深 灰色 、 实 线 ， 同 时 设置 | 
注册 按钮 以 背景 图 片 的 方式 显示 ， 并 且 鼠 标 移 至 按钮 上 时 显示 手 状 ，CSS 代码 如 下 所 示 。 


-Tegist { 
width:230px; 
border:1px #3A6587 solid; * 边 框 样式 */ 
} 
hl{ 
text-align:center; font-size:16px; line-height:35px; color:#FFF: 
background-color:# FCEB9B; 族 设 置 标题 背景 颜色 */ 
} 
.regist table {background-color:# C4FFD2; 族 设 置 注册 内 容 背 景 颜 色 */ } 


-Tegist table td {height:28px; font:12px "宋体 ";} 
.leftTitle {width:80px:text-align:right:} 


.textInput { 
border: lpx #7B7B7B solid; 证 设 置 文本 输入 框 的 样式 */ | 
width:130px: /# 设 置 文本 输入 框 的 宽度 所 | 
height17px: 人 # 设 置 文本 输入 框 的 高 度 拟 | 

bmRegist { | 
background:url(../image/btnRegist.jpg) Opx Opx no-repeat; /* 设 置 按钮 的 样式 */ | 
width:100px: /# 设 置 按钮 的 宽度 / | 
height:32px; 上 # 设 置 按钮 的 高 度 拟 | 
border:0px: 人 # 设 置 按钮 边框 为 无 状 | 
cursor:pointer; /# 设 置 鼠标 手 状 显示 所 | 

} | 


在 浏览 器 中 查看 的 页 面 效 果 如 图 7.5 所 示 ， 页 面 内 容 均 在 一 个 蓝 色 的 框 中 ， 所 有 文本 
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图 7.5” 购 票 注册 页 面 


从 上 面 的 HTML 代码 中 可 以 看 到 ，<h1> 标 签 与 它 外 层 的 <div> 标 签 ， 以 及 下 面 的 
<form> 标 签 之 间 均 无 内 容 ， 可 是 页 面 显 示 却 出 现 了 空隙 ， 为 什么 ? 答案 就 是 <h1> 标 签 
的 外 边 距 使 它 有 了 与 上 下 内 容 之 间 的 空隙 ， 下 面 就 开始 学 习 外 边 距 。 


7.1.3 边 距 


外 边 距 〔margin》 位 于 盒子 边框 外 ， 指 与 其 他 盒子 之 间 的 距离 ， 也 就 是 指 网 页 中 元 素 
与 元 素 之 间 的 距离 。 例 如 ， 图 7.5 中 标题 与 <div> 上 边框 之 间距 离 ， 以 及 标题 与 下 方 表单 之 
间 的 距离 都 是 由 于 <h1> 外 边 距 产生 的 。 从 图 中 也 可 以 看 到 页 面 内 容 并 没有 紧 贴 浏览 器 ， 而 
是 与 浏览 器 有 一 定 的 距离 ， 这 是 因为 <body> 本 身 也 是 一 个 盒子 ， 也 有 一 个 外 边 距 ， 这 也 是 
| 由 于 <body> 的 外 边 距 产生 的 。 
| 。。 外边 距 与 边框 一 样 ， 也 分 为 上 外 边 距 、 右 外 边 距 、 下 外 边 距 、 左 外 边 距 ， 设 置 方式 和 
| 设置 顺序 也 基本 相同 ， 具 体 属性 设置 如 表 7.4 所 示 。 


表 7.4 外 边 距 属性 设置 方法 


























示例 
margin-top: lpx; 
margin-right:2px; 
margin-bottom:2px; 
margin-left: 1px: 

上 、 右 、 下 、 左 外 边 距 分 别 是 3px、5px、7px、4px margin:3px 5px 7px 4px; 

上 下 外 边 距 为 3px . 

左右 外 边 距 为 5px Ps 

上 外 边 距 为 3px 

左右 外 边 距 为 4px margin:3px Spx 7px; 

下 外 边 距 为 7px 

上 、 右 、 下 、 左 外 边 距 均 为 8px margin: 8px: 

以 上 学 习 了 外 边 距 的 用 法 ， 在 网 页 制作 过 程 中 ， 根 据 页 面 制作 需要 ， 合 理 地 设置 外 边 


| 距 就 可 以 了 。 
| 但 是 在 实际 应 用 中 , 网 页 中 很 多 标签 都 有 默认 的 外 边 距 。 例如 , 标题 标签 <h1> 一 <h6>， 
| 段落 标签 <p>， 列 表 标 签 <ul><ol><li><dl><d> 和 <dd>， 页 面 主体 标签 <body>， 表 单 标签 
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< 
<form> 等 都 有 默认 的 外 边 距 ， 并 且 在 不 同 的 浏览 器 中 ， 这 些 标签 默认 的 外 边 距 也 不 一 样 。 
因此 为 了 使 页 面 在 不 同 浏览 器 中 显示 的 效果 一 样 , 通常 在 CSS 中 通过 并 集 选 择 器 统一 设置 | 
这 些 标签 的 外 边 距 为 0px， 这 样 页 面 中 不 会 因为 外 边 距 而 产生 不 必要 的 空隙 ， 各 浏览 器 显 | 
示 的 效果 也 会 一 样 。 
了 解 了 外 边 距 的 用 法 ， 现 在 修改 上 面 的 例子 ， 去 掉 页 面 中 的 空 阶 。 由 于 注册 按钮 与 上 ， 
面 的 文本 输入 框 和 下 面 边框 都 贴 得 较 近 , 现在 通过 margin 属性 设置 注册 按钮 与 上 下 内 | Note 
一 定 的 距离 。 修 改 后 的 CSS 代码 如 示例 7.2 所 示 。 
示例 7.2: 





@charset "GB2312"; 
*CSS Document */ 


body,hl {margin:0px;} 族 并 集 选 择 器 */ 
Tegist { 

width:230px: 

border: lpx #3A6587 solid: 
/*margin:O0px auto;*/ 


l | 
hif{ | 
text-align:center; | 
font-size:16px; 
background-color:#3A6587: 
line-height:35px: 
color:#FFF: 


Tegist table { 
background-color:#D4E8F7: 


-Tegist table td { 
height:28px; 
font:12px "宋体 "; 

上 

.leftTitle { 
width:80px; 
text-align:right: 


} 

.textInput { 
border: 1px #7B7B7B solid: | 
width:130px:; | 
height:17px; | 

} | 

.btnRegist { | 
background:url(../image/btnRegist.jpg) Opx Opx no-repeat: | 
width:100px: | 
height:32px; | 
border:0px: | 
cursor:pointer; | 
margin:5px Opx; | 


人 
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在 浏览 器 中 查看 的 页 面 效 果 如 图 7.6 所 示 ，<body> 和 <h1> 产 生 的 外 边 距 已 去 掉 ， 而 且 
主 册 按钮 的 上 下 产生 了 5px 的 外 边 距 ， 使 它 与 其 他 内 容 之 间 有 一 定 的 距离 ， 使 页 面 看 起 来 











图 7.6 去 掉 外 边 距 的 效果 图 





| 从 图 7.6 中 可 以 看 到 ， 页 面 内 容 在 浏览 器 的 左上 角 开始 显示 ， 而 实际 上 ， 大 家 在 浏览 
| 网 页 时 会 发 现 ， 大 多 数 网 页 内 容 都 是 在 浏览 器 中 间 显 示 , 在 CSS 中 , margin 属性 除了 使 用 
| 像素 值 设 置 外 边 距 之 外 ， 还 有 一 个 特殊 值 一 auto， 这 个 值 通常 用 在 设置 盒子 在 它 父 容器 
| 中 居中 显示 时 才 使 用 。 例如， 设置 图 7.6 中 页 面 内 容 居 中 显示 ,在 class 为 regist 的 DIV 样 
| 式 中 增加 居中 显示 样式 ， 代 码 如 下 所 示 。 
| Tegist { 
| width:230px:; 
| border: 1px #3A6587 solid; 
margin:0px auto; /# 上 、 下 外 边 距 为 0px, 左 、 右 外 边 距 自动 */ 
上 
在 浏览 器 中 查看 页 面 效 果 ， 如 图 7.7 所 示 ， 页 面 内 容 距 浏览 器 上 下 边 为 0px， 左 右 居 


| 中 显示 。 



































| 图 7.7 居中 显示 的 页 面 效果 
| 7.1.4 内 边 距 


| 内 边 距 (padding) 用 于 控制 内 容 与 边框 之 间 的 距离 ， 以 便 精确 控制 内 容 在 盒子 中 的 位 
| 置 。 内 边 距 与 外 边 距 一 样 ， 也 分 为 上 内 边 距 、 右 内 边 距 、 下 内 边 距 、 左 内 边 距 ， 设 置 方式 
| 和 设置 顺序 也 基本 相同 ， 具 体 属 性 设置 如 表 7.5 所 示 。 


表 7.5 内 边 距 属性 设置 方法 








属 性 说 明 示 例 
padding-left 设置 左 内 边 距 为 10px padding-left: 10px; 





lp 






















属 性 说 了 明 示例 
padding-right 设置 右 内 边 距 为 5px padding-right:Spx: | 
设置 上 内 边 距 为 20px adding-top:20px: | 会 内 
padding-bottom 设置 下 内 边 距 为 8px padding-bottom:8px: | 证 





上 、 右 、 下 、 左 内 边 距 分 别 为 20px、5px、8px、 
10px 

上 下 内 边 距 为 10px 

左右 内 边 距 为 Spx 

padding 上 内 边 距 为 30px 

左右 内 边 距 为 8px 

下 内 边 距 为 10px 


padding:20px 5px 8px Note 
10px; | 





padding: 10px Spx; 








上 、 右 、 下 、 左 内 边 距 均 为 10px 


回想 第 6 章 讲解 的 “全 部 商品 分 类 ”显示 的 例子 ， 它 的 列表 内 容 与 左 侧 边框 就 有 一 段 
距离 ， 如 图 7.8 所 示 。 | 

现在 使 用 学 习 过 的 padding 属性 ， 设 置 列表 内 边 距 为 px， 设 置 页 面 内 容 居 中 显示 ， | 
同时 对 于 页 面 中 能 够 产生 外 边 距 的 元 素 统一 使 用 并 集 选 择 器 设置 其 外 边 距 为 0px。 由 于 | 
HTML 代码 没有 改变 ， 这 里 仅 修改 CSS 代码 ， 关 键 代码 如 示例 7.3 所 示 。 | 





示例 7.3: 
bodyuLlifpadding:0px; margin:0px:} /# 并 集 选择 器 ,统一 设置 内 外 边 距 为 Opx*/ 
:wrap { 
width:220px; 
margin:0px auto; 族 页 面 居中 显示 */ 
} 


在 浏览 器 中 查看 页 面 效 果 如 图 7.9 所 示 ， 列 表 内 容 居 左 显示 ， 内 边 距 没 有 了 ， 并 且 页 
面 内 容 居中 显示 。 | 





图 7.8 内 边 距 效果 图 7.9 消除 内 外 边 距 的 效果 
7.1.5 盒子 模型 的 尺寸 


刚 开 始 使 用 DIV+CSS 制作 网 站 的 时 候 ， 可 能 有 不 少 人 会 因为 页 面 元 素 没有 按 预 期 的 
在 同一 行 显示 ， 而 是 折 行 了 ， 或 是 将 页 面 撑 开 了 ， 而 感到 迷惑 。 导 致 页 面 元 素 折 行 显示 ， 





i 
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或 撑 开 页 面 的 原因 ， 主 要 还 是 由 于 盒子 尺寸 问题 ， 下 面 就 来 详细 介绍 盒子 模型 尺寸 。 

在 CSS 中 ，width 和 height 属性 指 的 是 内 容 区 域 的 宽度 和 高 度 。 增 加 了 边框 、 内 边 距 和 
外 边 距 后 不 会 影响 内 容 区 域 的 尺寸 ， 但 是 会 增加 盒子 模型 的 总 尺寸 。 

假设 盒子 的 每 个 边 上 有 10px 的 外 边 距 和 5px 的 内 
边 距 ， 如 果 希 望 这 个 盒子 宽度 总 共 达 到 100px， 就 需要 
将 内 容 的 宽度 设置 为 70px， 如 图 7.10 所 示 。 

如 果 在 上 述 条 件 的 基础 上 ， 再 为 盒子 左右 各 增加 
lpx 的 边框 ， 要 是 盒子 总 尺寸 还 是 100px， 内 容 宽度 又 
该 设置 为 多 少 像素 呢 ? 根据 以 上 讲述 的 内 容 不 难看 出 ， 
应 该 将 内 容 的 宽度 设置 为 68px， 从 而 可 以 得 出 盒子 模 
型 总 尺寸 是 内 容 宽 度 、 外 边 距 、 内 边 距 和 边框 的 总 和 。 
盒子 模型 的 计算 方法 如 下 所 示 。 
盒子 模型 总 尺寸 =borderwidth+padding+margin+ 内 容 宽度 
在 精确 布局 的 页 面 中 ， 盒 子 模型 总 尺寸 的 计算 ， 显 得 尤为 重要 ， 因 此 ， 一 定 要 掌握 它 





10px Spx 











图 7.10 盒子 模型 尺寸 





7.2 标准 文档 流 





标准 文档 流 ， 简 称 “ 标 准 流 ”， 是 指 在 不 使 用 其 他 的 排版 和 定位 相关 的 特殊 CSS 规则 
时 ， 各 种 元 素 的 排列 规则 ， 即 CSS 规定 的 网 页 元 素 默认 的 排列 方式 。 

1. 块 级 元 素 

从 前 面 学 习 过 的 列表 可 以 知道 ， 每 个 <li> 标 签 都 占据 着 一 个 矩形 的 区 域 ， 并 且 和 相 邻 
的 <li> 标 签 依次 坚 直 排列 ,不 会 排 在 同一 行 中 。 与 < 这 标签 一 样 ，<ul> 标 签 也 具有 同样 的 性 
质 ， 因 此 这 类 元 素 称 为 “ 块 级 元 素 ”(block level)。 它 们 总 是 以 一 个 块 级 形式 表现 出 来 ， 
并 且 跟 同 级 的 兄弟 块 依次 竖 直 排列 , 左右 撑 满 , 如 前 面 学 习 过 的 标题 标签 、 段 落 标签 .<div> 
| 标签 都 是 块 级 元 素 。 
| 2. 内 联 元 素 
| “对 于 文字 这 类 元 素 , 各 个 字母 之 间 横 向 排列 ， 到 最 右 端 自 动 折 行 , 这 就 是 另 一 种 元 素 ， 
| 称 为 “内 联 元 素 ”Cinline)。 
| 例如 , <span></span> 标 签 就 是 一 个 典型 的 内 联 元 素 , 这 个 标签 本 身 不 占有 独立 的 区 域 ， 
| 仅仅 在 其 他 元 素 的 基础 上 指定 了 一 定 的 范围 。 再 如 ， 最 常用 的 <a><img/> 和 <strong> 标 签 都 
| 是 内 联 元 素 。 

由 此 可 知 ， 块 级 元 素 独占 一 行 ， 拥 有 自己 的 区 域 ， 而 内 联 元 素 则 没有 自己 的 区 域 ， 屠 
么 除 这 个 区 别 ， 它 们 之 间 还 有 其 他 的 区 别 吗 ? 

根据 以 前 学 过 的 关于 <span> 和 <div> 标 签 的 知识 可 以 知道 ，<span> 标 签 可 以 包含 于 
div> 标 签 中 ， 成 为 它 的 子 元 素 ， 而 反 过 来 则 不 成 立 。 从 <div> 和 <span> 标 签 之 间 的 区 别 ， 
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就 可 以 更 深刻 地 理解 块 级 元 素 和 内 联 元 素 的 区 别 。 


级 元 素 ， 还 有 一 种 是 以 <span> 标 签 为 代表 的 内 联 元 素 。 

事实 上 ， 对 于 这 些 标签 还 有 一 个 专门 的 属性 来 控制 元 素 的 显示 方式 ， 是 像 <div> 标 签 
那样 块 状 显 示 ， 还 是 像 <span> 标 签 那样 行内 显示 ， 这 个 属性 就 是 display 属性 。 | 

在 CSS 中 ，display 属性 用 于 指定 HTML 标签 的 显示 方式 ， 它 的 值 有 许多 个 ， 但 是 网 其 [2 中 
页 中 常用 的 只 有 3 个 ， 如 表 7.6 所 示 。 | 


表 7.6 display 属性 常用 值 





通过 前 面 的 讲解 ， 已 经 知道 标准 文档 流 有 两 种 元 素 : 一 种 是 blcdiv> 标 和 为 代表 的 块 





值 说 明 

block 块 级 元 素 的 默认 值 ， 元 素 会 被 显示 为 块 级 元 素 ， 该 元 素 前 后 会 带 有 换行 符 
inline 内 联 元 素 的 默认 值 ， 元 素 会 被 显示 为 内 联 元 素 ， 该 元 素 前 后 没有 换行 符 
none 设置 元 素 不 会 被 显示 











display 属性 在 网 页 中 用 得 比较 多 ， 下 面 以 流行 歌曲 《演员 》 为 例 演 示 display 设置 不 | 
同 值 的 效果 ， 歌 词 的 前 5 句 放 在 <span> 标 签 中 ， 第 6 一 10 句 放 在 <div> 标 签 中 ，HTML 代 | 
码 如 示例 7.4 所 示 。 


示例 7.4: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> | 
<body> | 
<div id="music"> | 
<hl> 演 员 </hl> | 
<p> 薛 之 谦 </p> | 
<span> 该 配合 你 演出 的 我 演 视而不见 </span> | 
<span> 别 逼 一 个 最 爱 你 的 人 即兴 表演 </span> 
<span> 什 么 时 候 我 们 开始 没有 了 底线 </span> 
<span> 顺 着 别人 的 谎言 被 动 久 不 显得 可 怜 </span> 
<span> 可 你 曾经 那么 爱 我 干 嘛 演出 细节 </span> 
<div> 我 该 变 成 什么 样子 才能 配合 出 演 </div> 
<div class=" song-1"> 原 来 当 爱 放下 防备 后 的 这 些 那 些 </div> 
<div class=" song-1"> 都 有 个 期 限 </div> 
<div> 其 实 台 下 的 观众 就 我 一 个 </div> 
<div class=" song-2"> 其 实 我 也 看 出 你 有 点 不 舍 </div> 
</div> 
</body> 
</html> 


使 用 CSS 设置 标题 、 文 本 样式 后 在 浏览 器 中 查看 页 面 效 果 ， 如 图 7.11 所 示 。 从 页 面 


























中 可 以 看 到 ， 前 5 名 歌词 放 在 <span> 标 签 中 ， 它 们 顺序 显示 ， 第 6 一 10 句 歌词 放 在 <div> 
标签 中 ， 每 句 独占 一 行 。 | 
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| 现在 使 用 display 属性 设置 <span> 标 签 为 块 级 元 素 , 设置 第 7 句 与 第 8 句 两 句 歌词 所 在 
| 的 <div> 标 签 为 内 联 元 素 ， 并 且 设置 第 10 句 歌词 不 显示 ，CSS 关键 代码 如 下 所 示 。 


#music span { 


display:block: 
padding-left:Spx: 


} 
#music div { 


padding-left:5px: 


1 


#music .song-l{display:inline:} 


#music .song-2{display:none:} 


在 浏览 器 中 查看 页 面 效 果 如 图 7.12 所 示 ， 第 1 一 5 句 歌词 均 独 占 一 行 


| 名 两 句 在 同一 行 显示 ， 并 且 第 10 句 歌词 已 不 显示 。 





请 外] 建议 网 站 ” 饮 ] 网 页 快讯 库 
仗 " 国 "马路 页 PD) > 


演员 





图 7.12 设置 display 属性 


第 7 句 与 第 8 


| 从 这 个 例子 可 以 看 出 ， 通 过 设置 display 属性 ， 可 以 改变 某 个 标签 本 来 的 元 素 类 型 

| 或 者 把 某 个 元 素 隐藏 起 来 。 其 实在 实际 的 网 页 制作 中 ，display 属性 经 常会 用 来 设置 某 个 元 
| 素 的 显示 或 隐藏 。 如 果 经 常 上 网 购物 ， 会 发 现 浏览 商品 列表 时 常常 会 有 这 样 
| 鼠标 放 在 某 个 商品 上 时 会 出 现 商品 的 价格 、 简 单 介 绍 、 热 卖 程度 等 ， 有 时 鼠标 放 在 一 个 商 


| 品名 称 上 时 会 








H 现 商品 图 片 、 价 格 等 商品 详细 情况 ， 这 些 都 是 互联 网 经 常 月 


| 属性 实现 的 页 面 效果 。 


“426 


一 个 现象 : 当 


日 到 的 display 





73 技能 训练 


1. 制作 聚 美 优 品 彩妆 热卖 产品 列表 页 面 | 


需求 说 明 : 
制作 聚 美 优 品 彩妆 热卖 产品 列表 页 面 ， 要 求 如 下 。 
(1) 页 面 背景 颜色 为 浅黄 色 ， 彩 妆 热 卖 产 品 列表 背景 颜色 为 白色 。 
(2) 标题 放 在 段落 标签 中 ， 标 题 背景 颜色 为 桃红 色 、 字 体 颜 色 为 白色 。 
(3) 使 用 无 序列 表 <ul> 制 作 彩 妆 热 卖 产品 列表 ， 两 个 产品 列表 之 间 使 用 虚线 隔 开 。 
(4) 超 链接 字体 颜色 为 灰色 、 无 下 划 线 ， 数 字 颜 色 为 白色 ， 数 字 背 景 为 灰色 圆圈 ， 
如 图 7.13 所 示 。 
(5) 当 鼠 标 移 至 超 链接 上 时 ， 超 链接 字体 颜色 为 桃红 色 、 无 下 划 线 ， 数 字 颜 色 为 白色 
数字 背景 为 桃红 色 圆 圈 ， 并 且 显 示 产品 对 应 的 图 片 、 价 格 和 当前 已 购买 人 数 ， 如 图 714 所 示 。 
大 家 都 喜欢 的 彩妆 
人 :4E 而 并 而 匠 美 白 所 本 看 < 
(和美 主 党 梢 Jt 矿物 再 妙 新 硕 乳 逢 58 箱 30n1 


中 - @ Title 合 彩妆 … x 


大 家 都 喜欢 的 彩妆 
人 46 有 有 能 丰 匠 美白 局 直下 35 


人 关 宇 笑柄 si 初 奇 妙 新 前 乳 害 B8 箱 30n1 
@ ¥akRccRoe 68 00 航 近 13810 人 购买 
全 mc 过 了 半生 构 序 妆 油 200n1 © Fun+Fcriioe 

人 Dr 避 3 放 向 横 郑 妆 油 200n1 





图 7.13 彩妆 热卖 产品 列表 图 7.14 属性 移 至 产品 上 时 的 效果 


2. 制作 新 迈 尔 课程 导航 页 面 


需求 说 明 : 
制作 如 图 7.15 所 示 的 课程 导航 页 面 ， 要 求 如 下 

(1) 使 用 标题 标签 实现 课程 导航 标题 ， 使 用 无 序列 表 实 现 课程 导航 列表 。 

(2) 课程 导航 4 个 边框 样式 均 为 lpx 的 实 线 ， 边 框 颜 色 值 为 kKAACBEE， 背 景色 值 为 | 


#ESF9FC 
(3) 课程 导航 前 的 图 标 和 每 个 课程 导航 右 侧 的 三 角 图 标 使 用 背景 图 像 的 方式 实现 。 


(4) 每 个 课程 导航 的 上 边框 为 1px 的 实 线 ， 使 用 border 属性 实现 。 
(5) 课程 导航 超 链接 无 下 划 线 ， 当 鼠标 移 至 超 链接 上 时 文本 颜色 值 变 为 村 F6215。 


(6) 使 页 面 居 中 显示 。 


人 





Eee 精通 +CSS 网 页 开发 与 制作 


3. 制作 聚 美 优 品 商品 分 类 页 面 

需求 说 明 : 

制作 如 图 7.16 所 示 的 聚 美 优 品 商品 分 类 页 面 ， 要 求 如 下 。 

(1) 页 面 背景 颜色 为 灰色 ， 商 品 分 类 列表 背景 颜色 为 白色 。 

(2) 使 用 标题 标签 制作 商品 分 类 标题 ， 标 题 背景 颜色 为 黑色 ， 字 体 颜色 为 白色 。 
(3) 使 用 定义 列表 <dl>-<dt>-<dd> 制 作 商品 分 类 列表 ， 各 分 类 名 称 前 的 小 图 片 使 用 背 












































(4) 分 类 列表 标题 与 列表 内 容 对 齐 显示 。 

(5) 使 页 面 居中 显示 。 

| 痪 收藏 严 上 将 弓 建议 网 站 
仿 商品 分 类 


- a 网 加 美 汉 归 条 
课程 导航 面 耻 面膜 巾 

水 梢 人 将 

二 归 凑 芝 习 泊 而 条 日 和 接种 


云 计算 
移动 互联 网 局 妥 

物 联网 技术 与 应 用 开交 防 晤 隅 各 B8 箱 办 粉 评 
软件 质量 ee ee” 
互联 网 营销 

互联 网 金融 

大 数据 

IT 运 维 





图 7.15 课程 导航 页 面 图 7.16 商品 分 类 页 面 

4. 制作 聚 美 优 品 美容 热点 产品 列表 
需求 说 明 : 
制作 如 图 7.17 所 示 的 大 家 都 喜欢 买 的 美容 品 列表 页 面 ， 要 求 如 下 。 
(1) 页 面 背景 颜色 为 浅黄 色 ， 美 容 热点 产品 列表 背景 颜色 为 白色 。 
(2) 标题 放 在 段落 标签 中 ， 标 题 背景 颜色 为 桃红 色 ， 字 体 颜 色 为 白色 。 
(3) 使 用 无 序列 表 <ul> 制 作 美容 品 列表 ， 两 个 产品 列表 之 间 使 用 虚线 隔 开 。 
(4) 超 链 接 字 体 颜色 为 灰色 、 无 下 划 线 ， 数 字 颜 色 为 白色 ， 数 字 背 景 为 灰色 圆圈 ， 
当 鼠 标 移 至 超 链 接 上 时 ， 超 链接 字体 颜色 为 桃红 色 、 无 下 划 线 ， 数 字 颜 色 为 白色 ,数字 背 
景 为 桃红 色 圆 圈 。 

(5) 使 页 面 居中 显示 。 

5. 制作 1 号 店 美 妆 商 品 图 片 列表 页 面 

需求 说 明 : 

制作 如 图 7.18 所 示 的 1 号 店 美 妆 商 品 图 片 列表 页 面 ， 要 求 如 下 。 

(1) 标题 的 英文 和 中 文 为 不 同 的 字体 ， 标 题 背景 颜色 为 紫色 。 

(2) 使 用 无 序列 表 <ul> 实 现 商品 图 片 列 表 的 排列 。 
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第 7 章 金子 模型 | 
(3) 超 链接 图 片 边框 为 1px 灰色 实 线 ， 当 鼠标 移 至 超 链 接 图 片上 时 ， 图 片 边框 为 1px 


楼 色 实 线 。 


画 计算 机 | 保护 异 式 : 茶 用 后 ~ 








图 7.17 美容 产品 列表 页 图 7.18 1 号 店 图 片 列表 
本 章 总 结 


回 “什么 是 盒子 模型 ? 盒子 模型 的 边框 、 外 边 距 和 内 边 距 在 网 页 中 的 应 用 。 
回 “使 用 border、padding、margin 属性 美化 网 页 元 素 。 
回 “精确 计算 盒子 模型 的 尺寸 大 小 。 
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本 章 简介 


CSS 网 页 布局 实际 上 就 是 使 用 CSS 浮动 (float ) 和 清除 (clear ) 元 素 ，position (定位 ) 
和 display 等 属性 进行 的 网 页 布局 。CSS 技术 的 核心 就 是 掌握 定位 ， 只 有 这 样 才能 用 CSS 
布局 出 专业 水 准 的 网 页 。 网 页 定位 这 是 一 种 很 重要 的 排版 理念 。 它 首先 对 <div> 标 签 进 行 
分 类 , 然后 使 用 CSS 对 各 个 <div> 标 签 进行 CSS 定位 , 最 后 在 各 个 <div> 标 签 中 编辑 页 面 内 
容 ， 这 样 就 实现 了 表现 与 内 容 分 离 ， 在 后 期 维护 CSS 十 分 容易 。 那 么 如 何 使 用 CSS 定位 
网 页 元 素 呢 ? 

这 就 是 本 章 重点 要 讲解 的 内 容 组 织 页 面 布局 的 又 一 柄 利 剑 一 一 浮动 和 清除 ， 也 就 是 
float 和 clear 属性 。 使 用 浮动 定位 网 页 元 素 ， 并 且 根 据 网 页 布局 需要 对 浮动 进行 清除 或 处 
理 溢出 内 容 ， 因 此 本 章 主要 学 习 的 内 容 有 以 下 3 点 。 

(1 ) 使 用 float 属性 定位 网 页 元 素 。 
(2 ) 使 用 clear 属性 清除 浮动 。 
(3 ) 使 用 overflow 属性 进行 溢出 处 理 。 


本 章 工作 任务 | 


> 制作 新 迈 尔 网 站 导航 
六 制作 彩 贝 论 坛 
> ”制作 开心 网 游戏 页 面 


本 章 技能 目标 | 


> 使 用 float 属性 定位 网 页 元 素 





Eee 精通 +CSS 网 页 开发 与 制作 
使 用 float 属性 结合 无 序列 表 制 作 横向 导航 
使 用 float 属性 创建 横向 多 列 布局 
使 用 clear 属性 清除 浮动 
使 用 overflow 进行 溢出 处 理 


VW YY 





请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 ， 了 解 它们 的 含义 和 发 音 ， 并 填写 于 横 





float 

left 

Tight 
clear 
both 
overflow. 
hidden, 


预习 并 回答 以 下 问题 


1. 使 用 float 属性 设置 页 面 元 素 浮动 时 ， 使 用 属性 值 left 和 right 有 什么 区 别 ? 

2. 使 用 clear 属性 清除 浮动 时 ， 使 用 属性 值 lgft、right 和 both 有 什么 区 别 ? 

3. 简单 描述 如 何 使 用 CSS 设置 网 页 元 素 可 自动 扩展 高 度 ， 使 它 能 够 从 外 观 上 包含 它 
| 里面 的 浮动 元 素 。 


8.1 网 页 布局 


| 浮动 ， 意 思 就 是 把 元 素 从 常规 文档 流 中 拿 出 来 。 这 样 的 作用 是 什么 呢 ? 一 是 可 以 实 
| 现 文字 环绕 图 片 的 效果 ， 二 是 可 以 让 原来 上 下 堆 生 的 块 级 元 素 ， 变 成 左右 并 列 ， 从 而 实 
| 现 布局 中 的 分 栏 。 那 么 如 何 布局 并 制作 一 个 完整 的 网 页 呢 ? 一 个 完整 的 页 面 至 少 包含 哪 
些 内 容 呢 ? 

平常 见 到 的 网 站 基本 上 都 包括 网 站 导航 、 主 体内 容 、 网 站 版 权 这 3 个 部 分 ， 网 站 导航 
一 般 包 括 网 站 LOGO、 导 航 菜单 及 一 些 其 他 信息 ， 主 体内 容 是 网 页 上 要 呈现 给 浏览 者 的 内 
容 ， 网 站 版 权 一 般 包括 网 站 声明 和 一 些 相关 链接 等 。 如 图 8.1 所 示 的 中 国 工商 银行 首页 
| 最 上 方 是 网 站 导航 ,包括 页 面 LOGO、 导 航 菜单 、 其 他 链接 : 中 间 是 网 站 的 主体 内 容 ， 最 
下 方 是 网 站 版 权 ， 包 括 网 站 的 版 权 声明 、 版 权 所 有 等 网 页 链接 。 











和 

















图 8.1 中 国 工商 银行 中 国 网 站 


虽然 互联 网 上 的 页 面 基本 上 都 包括 这 3 个 部 分 ， 但 在 布局 上 也 各 不 相同 ， 网 页 布局 类 | 
型 有 “ 国 ” 字 型 、 拐 角 型 、 标 题 正 文 型 、 左 右 框架 型 、 上 下 框架 型 、 综 合 框架 型 、 封 面 型 、| 
Flash 型 、 变 化 型 等 。 
国 ” 字 型 和 拐角 型 是 大 多 数 网 站 比较 喜欢 的 类 型 ， 也 是 经 常见 到 的 网 页 类 型 ， 因 此 | 
这 里 主要 介绍 这 两 种 网 页 类 型 ， 其 他 的 不 详细 讲解 。 
“ 国 ” 字 型 也 可 以 称 为 “1-3-1” 型 ， 最 上 面 是 网 站 导航 ， 中 间 主 体 部 分 为 左 、 中 、 右 | 
布局 ， 其 中 左 、 右 分 列 两 小 条 内 容 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗列 到 底 ， 最 下 面 是 网 
站 版 权 ， 如 图 8.1 所 示 就 是 这 样 的 布局 。 
拐角 型 与 “ 国 ” 字 型 只 是 形式 上 的 区 别 ， 其 实 是 很 相近 的 。 拐 角 型 页 面 上 方 的 网 站 导 ， 
航 包括 logo、 一 些 链接 或 广告 横幅 等 内 容 ， 接 下 来 的 左 侧 是 一 罕 列 网 站 链接 ， 右 侧 是 很 宽 | 
的 正文 ， 下 面 是 网 站 版 权 部 分 ， 因 此 拐角 型 也 可 以 称 为 “1-2-1” 型 ， 如 图 8.2 所 示 的 亚 马 | 
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图 8.2 ”拐角 型 页 面 
在 真正 地 使 用 CSS 布局 网 页 时 可 能 会 遇 到 一 个 最 大 的 问题 ， 那 就 是 如 何 让 两 个 或 3 
个 <div> 标 签 在 同一 行 显示 ， 实 现 页 面 的 “1-2-1” 或 “1-3-1” 布 局 ， 这 就 涉及 本 章 要 重点 
井 解 的 浮动 。 





8.2 至 动 


| CSS 设计 float 属性 的 主要 目的 ， 是 为 了 实现 图 文 混 排 的 效果 。 然 而 ， 这 个 属性 居然 也 
| 成 了 创建 多 栏 布局 最 简单 的 方式 。 在 标准 文档 流 中 , 一 个 块 级 元 素 在 水 平方 向 会 自动 伸展 ， 
| 直到 包含 它 的 元 素 的 边界 ， 在 竖 直 方向 和 其 他 的 块 级 元 素 依次 排列 。 那 么 如 何 才能 实现 如 
| 图 8.2 所 示 的 网 页 布局 呢 ? 这 就 需要 使 用 “浮动 ”属性 。 

| 要 实现 浮动 需要 在 CSS 中 设置 float 属性 ， 该 属性 默认 值 为 none， 也 就 是 标准 文档 流 
| 块 级 元 素 通常 显示 的 情况 。 如果 将 float 属性 的 值 设 置 为 left 或 right, 元 素 就 会 向 其 父 元 素 
| 的 左 侧 或 右 侧 浮动 ， 同 时 默认 情况 下 ， 盒 子 的 宽度 不 再 伸展 ， 而 是 根据 盒子 里 面 的 内 容 和 
| 宽度 来 确定 ， 这 样 就 能 够 实现 网 页 布局 中 的 “1-2-1” 或 “1-3-1” 布 局 类 型 。 


.8.2.1 浮动 在 网 页 中 的 应 用 


在 CSS 中 ， 使 用 浮动 (float) 属性 ， 除 了 可 以 建立 网 页 的 横向 多 列 布局 ， 还 可 以 实现 
车 多 其 他 的 网 页 内 容 的 布局 ， 如 图 8.3 所 示 的 横向 导航 菜单 、 图 8.4 所 示 的 商品 列表 展示 、 
| 图 8.5 所 示 的 栏目 标题 和 图 书 照片 与 文本 信息 左右 混 排 的 热 搜 图 书 列表 ， 这 些 都 是 使 用 
float 属性 设置 浮动 实现 的 效果 。 
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图 8.5 热 搜 图 书 列 表 
通过 以 上 介绍 和 认识 ， 可 见 float 属性 在 网 页 中 的 重要 作用 ， 下 面 介 绍 float 属性 。 


8.2.2 float 属性 


在 CSS 中 ， 通 过 float 属性 定义 网 页 元 素 在 哪个 方向 浮动 。 常 用 属性 值 有 左 浮动 、 右 
浮动 和 不 浮动 3 种 ， 具 体 属性 值 如 表 8.1 所 示 。 


表 8.1 float 属 性 值 


元 素 向 左 浮动 


元 素 向 右 浮动 


默认 值 。 元 素 会 显示 在 文本 中 出 现 的 位 置 | 
浮动 在 网 页 中 的 应 用 比较 复杂 ， 下 面 将 通过 实例 来 讲解 ， 具 体 代码 如 示例 8.1 所 示 。 | 


示例 8.1: 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href—"css/float.css"> 
</head> 
<body> 
<div class="father"> 
<div class="layer01"><img src="image/manao.png" alt=" 收 藏品 " /></div> 
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<div class="layer02"><img src="image/weiyipng" alt=" 衣 服 " /></div> 

<div class="layer03"><img src="image/yagao.png" alt=" 牙 谊 " /></div> 
| <div class="layer04"> 浮 动 的 盒子 ……- 
| </div> 

做 玉 | </body> 


</html> 


在 这 段 代 码 中 定义 了 5 个 <div> 标 签 ， 其 中 最 外 层 的 <div> 标 签 的 id 为 father， 另 外 4 

| 个 <div> 标 签 是 它 的 子 块 。 为 了 便于 观察 ,使 用 CSS 设置 所 有 <div> 标 签 都 有 一 个 外 边 距 和 
| 内 边 距 ， 并 且 设 置 最 外 层 <div> 标 签 为 实 线 边框 ， 内 层 的 4 个 <div> 标 签 为 虚线 边框 ， 代 码 
| 如 下 所 示 。 





div{margin:10px; padding:Spx:} 
.father {border: 1px #000 solid:} 
.layer01 {border:1px #F00 dashed:} 
.layer02 {border: 1px #00F dashed:} 
.layer03 {border:1px #060 dashed:} 


.layer04 {border: 1px #666 dashed: font-size:12px: line-height:20px:} 


在 浏览 器 中 查看 页 面 效果 ， 如 图 8.6 所 示 ， 由 于 没有 设置 浮动 ， 故 3 个 图 片 和 文本 所 
在 <di> 标 答 各 自 向 三 民 并 且 在 竖 直 方向 依次 排列 。 














图 8.6 未 设置 浮动 效果 图 


现在 学 习 float 属性 在 网 页 中 的 应 用 ， 在 学 习 如 何 设置 float 属性 的 同时 ， 将 充分 体会 
| 浮动 具有 哪些 性 质 。 为 了 方便 描述 ， 以 下 对 这 5 个 <div> 分 别 以 father、layer01 


、 、l]ayer02、 
，layer03、layer04 来 表示 ， 下 面 分 别 设置 它们 的 浮动 ， 然 后 查看 浮动 效果 。 


1. 设置 layer01 左 浮动 
在 上 面 代码 的 基础 上 , 通过 float 属性 设置 layer01 左 浮动 , 在 类 样式 layer01 中 增加 左 
| 浮动 的 代码 ， 如 下 所 示 。 
| .layer01 { 
border: 1px #F00 dashed: 
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在 浏览 器 中 查看 设置 完 layer01 左 浮动 的 页 面 效果 ， 如 图 8.7 所 示 ， 可 以 看 到 layer01 
向 左 浮动 ， 并 且 它 不 再 向 右 伸展 ， 而 是 仅 能 够 容纳 里 面 日 用 品 图 片 的 最 小 宽度 。 | 


float:left; 
} 

















图 8.7 设置 layer01 左 浮动 


仔细 看 图 8.7 可 以 发 现 ，layer02 的 左边 框 、 上 边框 分 别 与 layer01 的 左边 框 和 上 边框 | 
重合 , 由 此 可 知 设置 完 左 浮动 的 layer01 已 经 脱离 标准 文档 流 , 所 以 标准 文档 流 中 的 layer02 | 
顶 到 原来 layer01 的 位 置 ，layer03 也 随 着 layer02 的 移动 而 向 上 移动 。 | 
2. 设置 layer02 左 浮动 | 
现在 通过 float 属性 设置 layer02 左 浮动 , 在 类 样式 layer02 中 增加 左 浮动 的 代码 , 如 下 | 
所 示 。 | 
Jayer02 { 
border: lpx #00F dashed:; 
float:left; 
gy 
在 浏览 器 中 查看 设置 完 layer02 左 浮动 的 页 面 效 果 ， 如 图 8.8 所 示 ， 可 以 看 到 layer02 | 
向 左 浮动 ， 并 且 它 也 不 再 向 右 伸 展 ， 而 是 根据 里 面 的 图 片 宽 度 确定 本 身 的 宽度 。 | 

















图 8.8 设置 layer02 左 浮动 | 

从 图 8.8 中 可 以 更 清楚 地 看 出 ， 由 于 layer02 左 浮动 后 脱离 了 标准 文档 流 ，layer03 的 
左边 框 与 layer01 左边 框 重合 ，layer04 中 的 文本 移 了 上 来 ， 并 且 围 绕 着 几 个 图 片 显示 。 | 
3. 设置 layer03 左 浮动 | 
现在 通过 float 属性 设置 layer03 左 浮动 , 在 类 样式 layer03 中 增加 左 浮动 的 代码 , 如 下 
所 示 。 


.layer03 { 
border: lpx #060 dashed: 
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float:left; 
} 


在 浏览 器 中 查看 设置 完 layer03 左 浮动 的 页 面 效果 ， 如 图 8.9 所 示 ， 可 以 看 到 layer03 
| 向 左 浮动 ， 并 且 它 也 不 再 向 右 伸展 ， 而 是 根据 里 面 的 图 片 宽度 确定 本 身 的 宽度 。 




















图 8.9 设置 layer03 左 浮动 


4. 设置 layer01 右 浮动 
以 上 都 是 设置 <div> 标 签 左 浮动 ， 现 在 改变 浮动 方向 ， 把 layer01 的 左 浮动 改变 为 右 浮 
动 ， 代 码 如 下 所 示 。 
-layer01 { 
border: 1px #F00 dashed; 
float:right: 
b 
| 在 浏览 器 中 查看 设置 完 layer01 右 浮 动 的 页 面 效 果 , 如 图 8.10 所 示 , layer01 浮动 到 father 
| 的 右 侧 ，layer02 和 layer03 向 左 移动 ，layer04 中 的 文本 依然 环绕 着 几 张 图 片 。 








图 8.10 设置 layer01 右 浮动 


5. 设置 layer02 右 浮动 
现在 改变 layer02 的 浮动 方向 ， 把 layer02 的 左 浮动 改变 为 右 浮动 ， 代 码 如 下 所 示 。 
-layer02 { 
border:1px #00F dashed: 
float:right: 
} 
| 在 浏览 器 中 查看 设置 完 layer02 右 浮动 的 页 面 效 果 ， 如 图 8.11 所 示 ，layer01 位 置 没有 
| 改变 ，layer02 向 右 浮 动 ，layer04 中 的 文本 依然 环绕 着 几 张 图 片 。 




















8.11 设置 layer02 右 浮 动 
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83 清除 浮动 


在 前 面 的 讲解 中 , 全 面 地 剖析 了 CSS 中 的 浮动 属性 , 并 且 知 道 由 于 某 些 元 素 设置 了 浮 攻克 
动 ， 在 页 面 排版 时 会 影响 其 他 元 素 的 位 置 。 如 果 要 使 它 后 面 标准 文档 流 中 的 元 素 不 受 其 他 
浮动 元 素 的 影响 ， 该 怎么 办 呢 ? 这 就 需要 清除 浮动 ，clear 属性 在 CSS 中 正 是 起 到 这 样 的 | 
作用 。 下 面 将 详细 讲解 怎样 来 清除 浮动 。 | 
8.3.1 浮动 的 影响 | 
在 CSS 中 clear 属性 规定 元 素 的 哪 一 侧 不 允许 其 他 浮动 元 素 , 它 的 常用 值 如 表 8.2 所 示 。 
表 8.2 clear 属 性 值 





在 左 侧 不 允许 浮动 元 素 


在 右 侧 不 允许 浮动 元 素 
在 左 、 右 两 侧 不 允许 浮动 元 素 
默认 值 ， 允 许 浮动 元 素 出 现在 两 侧 





如 果 要 将 <img> 标 签 两 侧 的 浮动 元 素 清除 ， 可 使 用 clear 属性 设置 代码 如 下 所 示 。 
img { 
clear:both:; 

) 
clear 属性 常用 于 清除 浮动 带 来 的 影响 和 扩展 盒子 模型 的 高 度 , 下 面 通过 例子 来 详细 讲解 。 | 
还 是 以 上 面 的 例子 为 基础 进行 演示 ， 讲 解 clear 属性 。 清 除 左 浮动 的 代码 如 示例 8.2 所 示 。 | 

1. 清除 左 浮动 

示例 8.2: 


.layer04 { 
border: lpx #666 dashed: 
font-size:12px;: 
line-height:23px: 
clear:left: 

| 


在 浏览 器 中 查看 设置 了 清除 文本 左 侧 浮 动 内 容 的 代码 ,页 面 效 果 图 如 图 8.12 所 示 。 


| a | ge | : 
,Eg 2 { : : 
sa 局 本 
一 en 


图 8.12 清除 文本 左 浮动 UL 
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2. 清除 右 浮动 
由 于 文本 左 侧 浮动 的 内 容 只 有 layer03， 现 在 layer04 清除 了 左 侧 浮 动 的 内 容 ， 而 右 侧 
浮动 的 内 容 不 受 影响 ， 因 此 文本 在 layer03 的 下 方 显示 ， 但 是 还 是 环绕 着 另 两 个 图 片 显示 。 
| 那么 下 面 修改 代码 改 清除 layer04 右 侧 浮动 内 容 ， 代 码 如 下 所 示 。 
4 aayero4{ 
border:1px #666 dashed:; 
font-size:12px; 
line-height:23px:; 
clear:right; 
} 


在 浏览 器 中 查看 设置 了 清除 文本 右 侧 浮动 内 容 的 代码 ， 页 面 效 果 如 图 8.13 所 示 。 


浮动 的 全 于 




















图 8.13 ”清除 右 浮 动 
由 于 文本 右 侧 浮动 的 内 容 有 layer01 和 layer02， 现 在 layer04 清除 了 右 侧 浮动 的 内 容 ， 
| 因此 文本 在 最 高 的 图 片 下 方 显示 ， 与 希望 的 文本 在 所 有 图 片 下 方 显示 的 效果 一 致 。 但 是 这 
样 做 真 的 能 保证 任何 时 候 文本 都 在 所 有 浮动 内 容 的 下 方 显示 吗 ? 
| 下 面 做 一 个 实验 ， 把 layer01 设置 为 左 浮动 ， 代 码 如 下 所 示 。 

















.layer01 { 
| border: 1px #F00 dashed:; 
| float:left: 
| 国生 
| 重新 在 浏览 器 中 查看 将 layer01 设置 为 左 浮动 的 页 面 效果 ， 如 图 8.14 所 示 。 
> 
£3 














图 8.14 重新 设置 layer01 左 浮动 
看 到 页 面 效 果 了 吧 , 与 当初 希望 的 不 一 致 了 吧 ? 为 什么 会 这 样 呢 ? 现在 文本 左 侧 浮 动 
的 是 layer01 和 layer03， 右 侧 浮 动 的 是 layer02， 而 设置 了 清除 文本 右 侧 浮动 后 ， 仅 清除 了 
右 侧 浮动 ， 左 侧 浮 动 是 不 受 影响 的 ， 并 且 左 侧 的 图 片 高 于 右 侧 浮动 的 图 片 ， 所 以 文本 依然 
| 环绕 左 侧 比较 高 的 图 片 显示 。 
那么 如 何 设置 才能 够 确保 文本 总 是 在 所 有 图 片 下 方 显示 呢 ? 当然 是 将 两 侧 的 浮动 全 
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部 清除 了 。 


3. 清除 两 侧 浮动 


当 某 一 盒子 两 侧 都 有 浮动 元 素 ， 并 且 需 要 清除 元 素 两 侧 的 浮动 时 ， 就 需要 使 用 clear 
属性 的 值 both 了 。 修 改 代码 清除 layer04 两 侧 的 浮动 ， 代 码 如 下 所 示 。 | 


.layer04 { 
border: lpx #666 dashed: 
font-size:12px; 
line-height:23px; 
clear:both; 

} 


在 浏览 器 中 查看 清除 了 文本 两 侧 浮动 的 页 面 ， 效 果 如 图 8.15 所 示 。 





图 8.15 ”清除 两 侧 浮动 
8.3.2 ”扩展 盒子 的 高 度 


关于 clear 属性 的 作用 ， 除 了 用 于 清除 浮动 影响 之 外 ， 还 能 用 于 扩展 盒子 高 度 。 下 面 仍 以 
图 8.7 对 应 的 代码 为 例 ， 将 文本 所 在 的 layer04 也 设置 为 左 浮动 ， 代 码 如 示例 8.3 所 示 。 | 
示例 8.3: 


-layer04 { 
border: lpx #666 dashed: 
font-size:12px; 
line-height:23px:; 
clear:both; 
float:left: 

} 


这 时 在 father 里 面 的 4 个 <div> 标 签 都 设置 了 浮动 , 它们 都 不 在 标准 文档 流 中 , 这 时 在 
浏览 器 中 查看 页 面 效果 ， 如 图 8.16 所 示 。 | 











图 8.16 设置 layer04 左 浮动 
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| 从 图 8.16 中 可 以 看 到 , layer04 设置 左 浮动 之 后 ,father 的 范围 缩 成 一 条 , 是 由 padding 

| 和 border 构成 的 。 浮动 的 元 素 腊 离 了 标准 文档 流 , 所 以 它们 包围 的 图 片 和 文本 不 占据 空间 。 
也 就 是 说 ， 一 个 <div> 标 签 的 范围 是 由 它 里 面 的 标准 文档 流 的 内 容 决 定 的， 与 里 面 的 浮动 
| 内容 无 关 。 
那么 如 何 让 father 在 视觉 上 包围 浮动 元 素 呢 ? clear 属性 可 以 实现 这 样 的 效果 。 使 用 
clear 属性 能 够 实现 外 层 元 素 从 视觉 效果 上 包围 里 面 浮动 元 素 这 样 的 效果 , 那 就 是 在 所 有 浮 

| 动 的 <divz 标 签 后 面 再 增加 一 个 <div> 标 签 ，HTML 代码 如 示例 84 所 示 。 
示例 8.4: 

















<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href="css/float.css"/> 
</head> 
<body> 
<div class="father"> 
<div class="layer01"><img src="image/manao.png" alt=" 收 藏品 " /></div> 
<div class="layer02"><img src="image/weiyi.png" alt=" 衣 服 " /></div> 
<div class="layer03"><img src="image/yagao.png" alt=" 牙 谊 " /></div> 
<div class="layer04"> 浮 动 的 盒子 ……</div> 
<div class="clear"></div> 
</div> 
</body> 
</html> 


| 在 CSS 中 增加 类 样式 clear, 由 于 受到 CSS 继承 特性 的 影响 ,前 面 代码 设置 了 所 有 <div> 
| 标签 都 有 一 个 10px 的 外 边 距 和 5px 的 内 边 距 , 这 里 的 <div> 标 签 作用 主要 是 扩展 外 层 father 
| 的 高 度 ， 所 以 在 这 里 还 需要 把 内 边 距 和 外 边 距 设 置 为 0px， 代 码 如 下 所 示 。 


.clear { 
clear:both; 


margin:0px; 
padding:0px; 








本 在 浏览 器 中 查看 页 面 效果 ， 如 图 8.17 所 示 。 
| 从 上 面 的 代码 中 可 以 看 到 ， 虽 然 使 用 clear 属性 

一 达到 了 想 要 的 效果 ， 但 是 HTML 代码 却 不 完美 ， 
pa 厦 一 ” 出 现 了 代码 爱 肿 一 增加 了 HTML 的 代码 量 。 
那么 如 何在 不 增加 HTML 代码 的 情况 下 ， 仅 通 
过 CSS 设置 来 实现 同样 的 效果 呢 ? overflow 属性 
将 完美 地 解决 这 一 问题 。 


om 


























图 8.17 没有 设置 overflow 属性 
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在 网 页 制作 过 程 中 ， 有 时 需要 将 内 容 放 在 一 个 宽度 和 高 度 固定 的 盒子 中 ， 超 出 的 部 分 ， 
隐藏 起 来 ， 或 者 以 带 滚动 条 的 窗口 显示 ， 有 时 还 需要 外 层 的 盒子 从 外 观 上 包含 它 里 面 代码 情人 (2 
浮动 的 盒子 ， 这 些 都 需要 CSS 中 的 overflow 属性 来 实现 。 


8.4.1 overflow 属性 























在 CSS 中 ， 处 理 盒子 中 的 内 容 溢出 ， 可 以 使 用 overflow 属性 。 它 规定 当 内 容 溢出 盒 | 
子 时 发 生 的 事情 ， 如 内 容 不 会 被 修 前 而 呈现 在 盒子 之 外 ， 或 者 内 容 会 被 修剪、 修剪 内 容 隐 | 
藏 等 。overflow 属性 的 常见 值 如 表 8.3 所 示 。 | 


表 8.3 overflow 属性 的 常见 值 





属 性 值 说 了 明 

visible 默认 值 ， 内 容 不 会 被 修 前 ， 会 呈现 在 盒子 之 外 

hidden 内 容 会 被 修剪 ， 并 且 其 余 内 容 是 不 可 见 的 

scroll 内 容 会 被 修剪 ， 但 是 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 内 容 
auto 如 果 内 容 被 修 前 ， 则 浏览 器 会 显示 滚动 条 以 便 查 看 其 余 的 内 容 


下 面 通过 一 个 例子 ， 分 别 设置 overflow 属性 的 几 个 常用 属性 值 ， 来 深入 理解 overflow 
属性 在 网 页 中 的 应 用 。 页 面 的 HTML 代码 如 示例 8.5 所 示 。 | 


示例 8.5: 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href="css/css.css"> 
</head> 
<body> 
<div class="box"> 
<img src="img/sf.png" alt=" 沙 发 " /> 
<p> 在 CSS 中 使 用 overflow 属性 .……</p> 
</div> 
</body> 
</html> 


页 面 中 有 一 个 class 为 box 的 <div> 标 签 ， 里面 是 一 个 图 片 和 一 段 文本 。 为 了 能 更 清楚 
地 看 出 设置 了 overflow 属性 之 后 ， 对 盒子 内 元 素 的 影响 ， 使 用 CSS 为 盒子 设置 宽度 、 高 
度 和 边框 ， 代 码 如 下 所 示 。 | 


body { 
font-size:12px;: 
line-height:22px: 
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-box { 
width:200px:; 
height:150px; 
border: 1px #000 solid: 
一 | } 
由 于 visible 是 overflow 属性 的 默认 值 ， 因 此 设置 overflow 属性 的 值 为 visible 和 不 设 
| 置 是 一 样 的。 在 浏览 器 中 查看 页 面 效果 ， 如 图 8.18 所 示 。 
下 面 在 #content 中 增加 overflow 属性 ， 将 其 值 设置 为 hidden， 具 体 代 码 如 下 所 示 。 
-box{ 
width:200px: 
! height:150px; 
! border: 1px #000 solid; 
overflow:hidden: 


在 浏览 器 中 查看 页 面 效果 ， 如 图 8.19 所 示 。 
上 ET 
| 可 i 


















图 8.18 没有 设置 overflow 属性 图 8.19 设置 overflow 属性 


由 图 8.19 可 以 看 出 ， 超 出 盒子 高 度 的 文本 被 隐藏 起 来 了 ， 只 有 盒子 内 的 图 片 被 显示 。 
现在 修改 上 述 代码 ， 将 overflow 属性 的 值 分 别 设置 为 scroll 和 auto， 然 后 在 浏览 器 中 
| 查看 页 面 效果 ， 结果 如 图 8.20 和 图 8.21 所 示 。 











图 8.20 overflow 属性 值 为 scroll 图 8.21 overflow 属性 值 为 auto 


| 从 图 8.20 和 图 8.21 可 以 看 出 ， 两 者 在 处 理 盒子 内 元 素 溢 出 时 ， 都 出 现 了 滚动 条 ， 以 
| 便 查看 盒子 尺寸 之 外 的 内 容 。 唯 一 不 同 的 是 ，overflow 属性 值 设置 为 scroll 时 ， 尽 管 没 有 
| 在 X 方向 上 产生 内 容 溢出 ， 但 也 在 底部 显示 了 不 可 用 的 滚动 条 ;而 设置 为 auto 时 ， 则 仅 
| 在 内 容 有 溢出 的 高 度 部 分 产生 了 滚动 条 ， 底 部 并 没有 显示 滚动 条 。 


8.4.2 overflow 属性 的 妙用 
在 CSS 中 overflow 属性 除了 可 以 对 盒子 内 容 洪 出 进行 处 理 之 外 ， 还 可 以 与 盒子 宽度 
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性 | 

配合 使 用 ， 清 除 浮动 来 扩展 盒子 的 高 度 。 由 于 这 种 方法 不 会 产生 宛 余 标签 ， 仅 需要 设置 外 | | 
层 盒子 的 宽度 和 overflow 属性 值 为 hidden 即 可 , 因此 这 种 方法 常用 来 设置 外 层 盒子 包含 内 | 
层 浮动 元 素 的 效果 。 
下 面 仍然 以 示例 8.3 为 基础 ， 使 用 overflow 属性 完成 清除 浮动 和 扩展 盒子 高 度 。 其 设 全 
置 方法 非常 简单 ， 只 需要 为 浮动 元 素 的 外 层 元 素 father 设置 宽度 和 将 overflow 属性 设置 为 ， 
hidden， 同 时 将 清除 浮动 的 代码 “<div class="clear"></div>” 删 除 ， 不 需要 添加 到 HTML | JNote 
代码 中 了 。 详 细 的 HTML 代码 如 示例 8.1 所 示 的 原始 HTML 代码 。 

下 面 修改 示例 8.4 中 的 CSS 代码 ， 首 先 删除 类 样式 clear， 然 后 修改 father 代码 ， 增 加 | 
盒子 宽度 和 overflow 属性 ， 代 码 如 示例 8.6 所 示 。 | 


示例 8.6: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" href="css/float.css"> 
</head> 
<body> 
<div id="father"> 
<div class="layer01"><img src="image/photo-1.jpg" alt=" 日 用 品 " /></div> 
<div class="layer02"><img src="image/photo-2.jpg" alt=" 图 书 " /></div> 
<div class="layer03"><img src="image/photo-3.jpg" alt=" 鞋 子 " /></div> 
<div class="layer04"> 浮 动 的 盒子 ……</div> 
</div> 
</body> 
</html> 


CSS 主要 代码 ;: 


father { 
border: 1px #000 solid; 
width:500px:; 
overflow: hidden:} 


在 浏览 器 中 查看 页 面 效 果 ， 如 图 8.22 所 示 。 














图 8.22 ”使 用 overflow 属性 扩展 盒子 高 度 


由 上 述 代码 可 以 看 出 ， 实 现 同样 的 效果 ,使 用 overflow 属性 配合 宽度 清 除 汉 动 和 扩充 
盒子 高 度 ， 比 使 用 clear 属性 代码 量 大 大 减少 ， 也 减少 了 空 的 HTML 标签。 这 样 做 的 好 处 | 
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| 是 使 代码 更 加 简洁 、 清 晰 ， 从 而 提高 了 代码 的 可 读 性 和 网 页 性 能 。 

| 但 是 如 果 页 面 中 有 绝对 定位 (后 面 讲解 ) 元 素 ， 并 且 绝对 定位 的 元 素 超出 了 父 级 的 范 
， 围 ， 这 里 使 用 overflow 属性 就 不 合适 了 ， 而 需要 使 用 clear 属性 来 清除 浮动 。 

| 因此 通过 clear 属性 和 overflow 属性 实现 清除 浮动 来 扩充 盒子 高 度 ， 要 根据 它们 各 自 
二 的 特点 和 网 页 实际 需求 来 设置 。 














8.5 技能 训练 


1. 制作 彩 贝 论坛 

需求 说 明 : 

(1) 使 用 标题 标签 和 列表 以 及 相对 应 的 标签 制作 如 图 8.23 所 示 的 彩 贝 论坛 。 
(2) 使 用 浮动 完成 页 面 的 布局 。 

(3) 标题 字体 大 小 为 14px。 

(4) 论坛 内 容 部 分 添加 1px 的 灰色 实 线 边框 (#DFDFDF )。 

(5) 鼠标 滑 过 列表 时 出 现下 划 线 。 




















图 8.23 彩 贝 论坛 
2. 制作 开心 网 的 游戏 页 面 
需求 说 明 : 
制作 如 图 8.24 所 示 的 开心 网 -网 页 游戏 页 面 ， 具 体 要 求 如 下 。 


x 











图 8.24 开心 网 -网 页 游戏 
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(1) 使 用 float 属性 实现 布局 。 


(2) 使 用 图 片 和 背景 图 完成 内 容 部 分 。 





(3)“ 进 入 游戏 ”和 “新 手 资料 ”能 够 


3. 制作 新 迈 尔 网 页 导航 


单 击 。 





第 8 章 


制作 如 图 8.25 所 示 的 新 迈 尔 网 站 导航 页 面 ， 要 求 如 下 。 





(1) 网 站 导航 在 浏览 器 中 居中 显示 。 


(2) 导航 顶部 LOGO 居 左 显示 ,“ 咨 询 电话 ” 居 右 显示 。 





(3) 网 站 导航 菜单 背景 颜色 为 黑色 ， 导 航 字体 颜色 为 白色 ， 


12px， 数 字 大 小 为 20px; 没有 下 划 线 。 
4. 制作 视频 宣传 列表 页 
需求 说 明 : 


制作 如 图 8.26 所 示 的 视频 宣传 片 列 表 页 面 ， 要 求 如 下 。 
(1) 精彩 视频 列表 内 容 在 浏览 器 中 居 右 显示 。 
(2) 标题 背景 使 用 背景 图 片 实现 ， 标 题字 体 样式 为 14px、 白 色 、 加 粗 显示 。 
(3) 使 用 无 序列 表 排 版 精彩 视频 列表 内 容 。 


(4) 视频 列表 所 在 内 容 背 景 颜色 为 浅 灰 色 ， 图 片 添加 超 链接 ， 图 片 边框 为 2px 6 | 


实 线 ， 当 鼠标 移 至 图 片上 时 ， 图 片 边框 变 为 2px 橙色 实 线 。 
(5) 视频 图 片 标题 加 粗 显 示 ， 时 长 和 点 击 前 的 小 图 标 使 用 背景 图 像 的 方式 实现 。 









































田阳 


使 用 overflow 属性 控制 溢出 内 容 。 





使 用 float (浮动 ) 属性 布局 网 页 元 素 。 
使 用 clear 属性 清除 浮动 对 网 页 元 素 的 影响 。 
使 用 clear 和 overflow 属性 扩展 盒子 大 小 (高 度 )。 


.147 。 


“咨询 电话 ”字体 大 小 为 | 


美丽 的 起 点 
ob 
国生 击 ;657642 


-5 


就 业 明星 
Ht: ot 
国 4: 476s1250 


图 8.26 视频 列表 页 





定位 网 页 元 素 


在 学 习 浮动 的 知识 ， 以 及 使 用 浮动 布局 网 页 、 定 位 网 页 元 素 后 ， 本 章 将 要 讲解 网 页 制 
作 中 另 一 个 重要 属性 一 -position 定位 属性 。CSS 布局 的 核心 是 position 属性 ， 对 元 素 盒子 
应 用 这 个 属性 ， 可 以 相对 于 它 在 常规 文档 流 中 的 位 置 重新 定位 。position 属性 有 4 个 值 : 
static、relative、absolute 和 fixed， 默 认 值 为 static。 这 些 属 性 都 是 什么 意思 ? 下 面 介绍 使 用 
position 定位 网 页 元 素 ， 以 及 设置 元 素 堆 有 登 顺序 的 z-index 属性 。 

通过 本 章 的 学 习 ， 将 能 够 完成 网 页 中 更 为 复杂 的 布局 和 元 素 定位 。 本 章 主要 学 习 的 内 
容 有 以 下 两 点 。 

(1 ) 使 用 position 属性 定位 网 页 元 素 . 
(2 ) 使 用 z-index 属性 设置 元 素 的 堆 合 顺序 。 


本 二 工作 在 人 


> ”制作 带 按 钮 的 轮 播 广告 
> ”制作 下 拉 列表 导航 菜单 
> 制作 当当 图 书 榜 页 面 





> 使 用 position 属性 定位 网 页 元 素 
> ”使 用 z-index 属性 调整 定位 元 素 的 扒 登 顺序 
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| 

请 在 预习 时 找 出 下 列 单词 在 教材 中 的 用 法 , 了 解 它们 的 含义 和 发 音 , 并 填写 于 横 线 处 。 
Position 

static 

Telative 

absolute 

fixed 

Z-index 


预习 并 回答 以 下 问题 


(1) 在 CSS 中 position 属性 值 absolute 表示 什么 定位 ? 
(2) 在 CSS 中 使 用 什么 方式 可 以 设置 网 页 元 素 的 透明 度 ? 
(3 ) 在 网 页 中 z-index 属性 对 没有 设置 定位 的 网 页 元 素 有 效 吗 ? 


9.1 定位 在 网 页 中 的 应 用 


在 CSS 中 有 3 种 基本 的 定位 机 制 , 分 别 是 标准 流 、 浮 动 和 绝对 定位 。 通常 在 网 页 中 除 
| 非 专门 指定 某 种 元 素 的 定位 ， 否 则 所 有 元 素 都 在 标准 流 中 定位 ， 也 就 是 说 标准 流 中 元 素 的 
| 位 置 由 在 XHTML 中 的 位 置 决定 。 
| 在 前 面 的 章节 已 经 学 习 了 标准 流 和 浮动 ， 使 用 浮动 的 方式 可 以 定位 网 页 元 素 。 但 是 
| 仅 使 用 浮动 一 种 方式 ， 完 成 不 了 网 页 中 很 多 更 为 复杂 的 网 页 效果 。 例 如 ， 图 9.1 所 示 的 
新 迈 尔 网 站 〈http:/www.itzpark.com) 中 的 下 拉 列 表 菜单 ， 图 9.2 所 示 的 随 滚 动 条 滚动 而 
位 置 不 变 的 返回 顶部 按钮 ， 以 及 图 9.3 所 示 的 鼠标 滑 过 “发 货 地 ”按钮 弹出 的 地 点 选择 框 。 
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图 9.1 下 拉 菜 单 图 9.2 返回 项 部 按钮 
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发 货 地 233 | 三 下 < S00 > 
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从 图 9.1 一 图 9.3 中 可 以 看 出 ， 无 论 是 弹出 的 选择 框 窗口 ， 还 是 下 拉 菜 单 、 浮 动 图 片 ， | 
它们 都 有 一 个 共同 特点 ， 即 都 脱离 了 原 有 的 页 面 ， 浮 动 在 了 网 页 之 上 。 对 于 这 样 的 网 页 元 | 


素 定位 , 使 用 position 属性 或 position 属性 与 z-index 属性 结合 来 实现 。 下面 分 别 详细 讲解 。 


9.2 position 属性 





position 属性 与 float 属性 一 样 ， 都 是 CSS 排版 中 非常 重要 的 概念 。position 从 字 














面 意 | 


思 上 看 就 是 指定 盒子 的 位 置 ， 指 它 相对 其 父 级 的 位 置 和 相对 它 自身 应 该 在 的 位 置 。position 


属性 有 4 个 属性 值 ， 分 别 代表 着 不 同 的 定位 类 型 。 
回 static: 默认 值 ， 没 有 定位 ， 元 素 按照 标准 流 进行 布局 。 


回 relative; 相对 定位 ， 使 用 相对 定位 的 盒子 位 置 常 以 标准 流 的 排版 方式 为 基础 ， 然 ， 


后 使 盒子 相对 于 它 在 原本 的 标准 位 置 偏 移 指定 的 距离 。 相对 定位 的 全 子 仍 在 标准 
流 中 ， 它 后 面 的 盒子 仍 以 标准 流 方式 对 待 它 。 


回 absolute: 绝对 定位 , 盒子 的 位 置 以 包含 它 的 盒子 为 基准 进行 偏 移 。 绝对 定位 的 全 | 
子 从 标准 流 中 脱离 。 这 意味 着 它们 对 其 后 的 其 他 盒子 的 定位 没有 影响 ， 其 他 的 盒 | 


子 就 好 像 这 个 盒子 不 存在 一 样 。 


回 fixed: 固定 定位 ， 和 绝对 定位 类 似 ， 只 是 以 浏览 器 窗口 为 基准 进行 定位 ， 也 就 是 


当 拖 动 浏览 器 窗口 的 滚动 条 时 ， 依 然 保持 对 象 位 置 不 变 。 
fixed 属性 值 目前 在 一 些 浏览 器 中 还 不 被 支持 , 在 实际 的 网 页 制作 中 也 不 常 应 用 ,下 面 
通过 实例 讲解 position 属性 的 其 他 3 个 值 在 网 页 中 的 应 用 。 


9.2.1 static (没有 定位 ) 
静态 定位 〈static) 为 默认 值 ， 在 静态 定位 的 情况 下 ， 每 个 元 素 都 处 在 常规 文档 流 中 。 





司 


它们 都 是 块 级 元 素 ， 所 以 就 会 在 页 面 中 自 上 而 下 、 从 左 到 右 的 顺序 堆 县 起 来 。 它 表示 盒子 
保持 在 原本 应 该 在 的 位 置 上 ， 没 有 任何 移动 的 效果 。 因 此 ， 前 面 章节 讲解 的 例子 实际 上 都 | 


i 
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是 static 方式 。 

要 想 突破 static 定位 提供 的 这 种 按 顺序 布局 元 素 的 方式 , 必须 把 盒子 的 position 属性 改 
| 为 其 他 3 个 值 。 为 了 方便 清楚 地 理解 ， 现 在 用 一 个 基础 的 页 面 ， 讲 解 其 他 定位 方式 时 在 此 
| 基础 页 面 上 进行 修改 。 
| 页面 中 有 一 个 class 为 wrap 的 <div> 标 签 ， 里 面 嵌 套 3 个 <div> 标 签 ，HTML 代码 如 示 
例 9.1 所 示 。 

示例 9.1: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<link rel="stylesheet" type="text/css" hre 合 "css/01.css"/> 
</head> 
<body> 
<div class="wrap"> 
<div class="first"> 第 一 个 盒子 </div> 
<div class="second"> 第 二 个 盒子 </div> 
<div class="third"> 第 三 个 盒子 </div> 



































| </div> 

| </body> 

| </html> 

| 使 用 CSS 设置 wrap 的 边框 样式 和 获 套 的 几 个 <div> 标 签 的 背景 颜色 、 边 框 样式 ， 关 键 
| 代码 如 下 所 示 。 

| divbody { 

| margin:10px; 

| padding:Spx; 

| font-size:12px; 

| line-height:25px: 

| 国 旺 

apt 

| border: 1px #666 solid; 

| padding:0px: 

nm 

| first { 

| background-color:#F49D9D:; 
| border:1px #B55A00 dashed; 
| } 

.second { 
background-color:#B6ABFD: 
border: lpx #0000A8 dashed: 

} 

.third { 

| backsground-color:#A7FDA1: 
| border: 1px #395E4F dashed: 
| } 


和 
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在 浏览 器 中 查看 页 面 效 果 ， 如 图 9.4 所 示 ， 由 于 没有 设置 定位 ，3 个 盒子 在 父 级 盒子 
中 以 标准 文档 流 的 方式 呈现 。 | 





Note 











9.4 没有 设置 定位 


9.2.2 relative (相应 定位 ) 


使 用 relative 属性 值 设 置 元 素 的 相对 定位 ， 光 设置 这 个 属性 还 看 不 出 来 有 什么 不 一 样 ， | 
因为 只 设置 了 它 的 定位 方式 是 “相对 定位 ”。 到 底 相对 哪里 定位 呢 ? 相对 的 是 它 原来 在 文 ， 
档 流 中 的 位 置 (或 者 默认 位 置 )。 除 了 将 position 属性 设置 为 relative 之 外 ， 还 需要 指定 一 
定 的 偏 移 量 , 水 平方 向 使 用 left 或 right 属性 来 指定 ,垂直 方向 使 用 top 或 bottom 属性 来 指 
定 。 下 面 将 第 一 个 盒子 的 position 属性 值 设 置 为 relative， 并 设置 偏 移 量 ， 代 码 如 示例 9.2 
所 示 。 


示例 9.2: 


.first { 
background-color:#f49d9d: 
border: lpx #B55A00 dashed: 
position: relative; 
left:20px:; | 
top:-20px; | 

} | 


在 浏览 器 中 查看 页 面 效 果 如 图 9.5 所 示 ， 第 一 个 盒子 的 新 位 置 与 原来 的 位 置 相 比 ， 可 
以 看 出 ， 它 向 上 和 向 右 均 移动 了 20px。 也 就 是 说 ,“top:-20px” 的 作用 是 使 它 的 新 位 置 在 | 
原来 位 置 的 基础 上 向 上 移动 20px,“left:20px” 的 作用 是 使 它 的 新 位 置 在 原来 位 置 的 基础 上 
向 右 移 动 20px。 | 














图 9.5 第 一 个 盒子 向 上 向 右 偏 移 


这 里 用 到 了 top 和 left 两 个 CSS 属性 ， 前 面 已 经 提 过 在 CSS 中 一 共有 4 个 属性 配合 | 
position 属性 来 进行 定位 ,除了 top 和 left 外 ,还 有 right 和 bottom。 这 4 个 属性 只 有 当 position | 
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| 属性 设置 为 absolute、relative 或 fixed 时 才 有 效 。 并 且 position 属性 取 值 不 同时 ， 它 们 的 含 
| 义 也 是 不 同 的 。top 、right、bottom 和 left 这 4 个 属性 除了 可 以 设置 为 像素 值 ， 还 可 以 设置 
| 为 百分数 。 

SA 
| 一定 的 距离 。 虽 然 它 移出 了 父 级 盒子 ， 但 是 父 级 盒子 并 没有 因为 它 的 移动 而 有 任何 影响 ， 它 


Note 


从 图 9.5 中 可 以 看 到 第 一 个 盒子 的 宽度 依然 是 未 移动 前 的 宽度 ， 只 是 向 上 、 向 右 移动 了 


依然 在 原来 的 位 置 。 同 样 地 ， 第 二 个 、 第 三 个 盒子 也 没有 因为 第 一 个 盒子 的 移动 而 有 任何 改 
变 ， 它 们 的 宽度 、 样 式 、 位 置 都 没有 改变 。 

上 面 的 例子 是 一 个 盒子 设置 了 相对 定位 后 ， 对 其 他 盒子 没有 影响 ， 如 果 有 两 个 盒子 设 
置 了 相对 定位 ， 对 其 他 盒子 会 有 影响 吗 ? 它们 相互 之 间 会 有 影响 吗 ? 下 面 使 用 相对 定位 设 
置 第 三 个 盒子 ， 代 码 如 下 所 示 。 

-third { 

background-color:#C5DECC: 

border: lpx #395E4F dashed:; 

position:relative; 
right:20px; 
bottom:30px; 

| 

在 浏览 器 中 查看 页 面 效 果 如 图 9.6 所 示 ， 第 三 个 盒子 的 新 位 置 与 原来 的 位 置 相 比 ， 它 
向 上 和 向 左 分 别 移动 了 30px、20px。 也 就 是 说 ,“right:20px” 的 作用 是 使 它 的 新 位 置 在 原 
来 位 置 的 基础 上 向 左 移动 20px,“bottom:30px” 的 作用 是 使 它 的 新 位 置 在 原来 位 置 的 基础 
上 向 上 移动 30px。 














图 9.6 第 三 个 盒子 向 上 向 左 偏 移 


从 图 9.6 中 可 以 看 到 第 三 个 盒子 设置 相对 定位 后 ， 它 向 左 、 向 上 移动 了 一 定 的 距离 ， 


| 但 是 自身 的 宽度 并 没有 改变 ， 同 时 它 的 父 级 盒子 、 第 一 个 和 第 二 个 盒子 也 没有 因为 它 的 和 
| 动 而 有 任何 改变 。 至 此 可 以 总 结 出 设置 相对 定位 元 素 的 规律 如 下 。 


影响。 


相对 定位 也 是 一 样 的 。 





(1) 设置 相对 定位 的 盒子 会 相对 它 原来 的 位 置 ， 通 过 指定 偏 移 ， 到 达 新 的 位 置 。 
(2) 设置 相对 定位 的 盒子 仍 在 标准 流 中 ， 它 对 父 级 盒子 和 相 邻 的 盒子 都 没有 任何 





需要 指出 的 是 ， 上 面 的 例子 都 是 针对 标准 流 方式 进行 的 。 实 际 上 ， 对 浮动 的 盒子 使 用 





为 了 验证 上 述说 法 ， 在 示例 9.1 的 页 面 代码 基础 上 设置 第 二 个 盒子 右 浮动 ， 关 键 代 码 


| 如 示例 9.3 所 示 。 
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border:1px #395E4F dashed: 
1 


在 浏览 器 中 查看 页 面 效果 如 图 9.7 所 示 。 


示例 9.3: | 
divbody { | 
margin: 10px; | 
Ppadding:5px; 
font-size:12px; | 
line-height:25px: 
} | 
.father { | 
border:1px #666 solid; | 
padding:Opx; | 
} | 
first { | 
background-color:#f49d9d; | 
border:1px #B55A00 dashed; | 
} | 
.second { | 
background-color:#b6abfd: | 
border: 1px #0000A8 dashed: 
float:right:; | 
， | 
.third { | 
background-color:#a7fdal; | 





图 9.7 设置 第 二 个 盒子 右 浮动 


现在 设置 第 一 个 盒子 向 上 向 左 偏 移 ， 第 二 个 盒子 向 上 向 右 偏 移 ， 代 码 如 下 所 示 。 


.first { 
background-color:#FC9; 
border: lpx #B55A00 dashed: 
position:relative; 
right:20px; 
bottom:20px; 

} 

.second { 
background-color:#CCF:; 
border: 1px #0000A8 dashed: 
float:right; 
position:relative; 
left:20px; 
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top:-20px; 
) 
在 浏览 器 中 查看 页 面 效果 如 图 9.8 所 示 ， 第 一 个 盒子 向 上 向 左 各 偏 移 20px， 第 二 个 盒 
| 子 向 上 向 右 各 偏 移 20px。 








图 9.8 在 浮动 下 偏 移 


从 图 9.8 可 以 看 到 ， 第 一 个 盒子 没有 设置 浮动 ， 它 的 偏 移 对 父 级 盒子 和 相 邻 两 个 盒子 
都 没有 影响 , 第 二 个 盒子 设置 了 浮动 , 但 是 它 的 偏 移 依然 对 父 级 盒子 和 相 邻 盒子 没有 影响 。 
由 此 可 以 得 出 一 个 结论 ， 设 置 了 position 属性 的 网 页 元 素 ， 无 论 是 在 标准 流 中 还 是 在 浮动 
| 时 ， 都 不 会 对 它 的 父 级 元 素 和 相 邻 元 素 有 任何 影响 ， 它 只 针对 自身 原来 的 位 置 进行 偏 移 。 


9.2.3 absolute (绝对 定位 ) 


了 解 了 相对 定位 以 后 ， 下 面 开 始 分 析 absolute 定位 方式 ， 它 表示 绝对 定位 。 与 相对 定 
位 不 一 样 ， 因 为 绝对 定位 会 把 元 素 彻底 从 文档 流 中 拿 出 来 。 修改 上 例 中 的 代码 ， 把 relative 
改 成 absolute， 通 过 上 面 的 学 习 ， 可 以 了 解 到 设置 position 属性 时 ， 需 要 配合 top、right、 
bottom、left 属性 来 实现 元 素 的 偏 移 量 ， 而 其 中 核心 的 问题 就 是 以 什么 作为 偏 移 的 基准 。 

对 于 相对 定位 ， 就 是 以 盒子 本 身 在 标准 流 中 或 者 浮动 时 原本 的 位 置 作为 偏 移 基准 的 ， 
那么 绝对 定位 以 什么 作为 定位 基准 呢 ? 

下 面 还 是 以 示例 9.1 的 网 页 代码 为 基础 ， 通 过 一 个 个 例子 来 演示 讲解 绝对 定位 在 页 面 
中 的 用 法 。 设 置 <body> 标 签 、 内 嵌 的 3 个 <div> 标 签 外 边 距 均 为 0px， 关 键 代 码 如 示例 9.4 
所 示 。 


示例 9.4: 


body{margin:0px:} 

div{ 
padding:Spx: 
font-size:12px: 
line-height:25px: 

} 

‘father { 
border: 1px #666 solid: 
Padding:Opx; 

} 

first { 
background-color:#F49D9D: 
border:1px #B55A00 dashed: 

} 


.second { 
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background-color:#B6ABFD: 

border: 1px #0000A8 dashed: 
-third { 

background-color:#A7FDA!1; 

border: 1px #395E4F dashed: 
} 


在 浏览 器 中 查看 页 面 效 果 如 图 9.9 所 示 ， 内 嵌 的 3 个 盒子 以 标准 文档 流 的 方式 排列 。 











图 9.9 未 设置 决定 定位 | 
现在 使 用 绝对 定位 来 改变 盒子 的 位 置 , 将 第 二 个 盒子 设置 为 绝对 定位 , 代码 如 下 所 示 。 | 


| 
.second { | 
background-color:#CCF: | 
border: 1px #0000A8 dashed: | 
position:absolute; 
top:Opx; | 
right:0px; | 

| 

这 里 将 第 二 个 盒子 的 定位 方式 从 默认 的 static 改 为 absolute, 在 浏览 器 中 查看 页 面 效果 ， 

如 图 9.10 所 示 。 从 图 中 可 以 看 到 ， 第 二 个 盒子 彻底 脱离 了 标准 文档 流 ， 它 的 宽度 也 变 为 仅 | 
能 容纳 里 面 的 文本 宽度 ， 并 且 以 浏览 器 窗口 作为 基准 显示 在 浏览 器 的 右上 角 ， 并 Ht 第 | 
三 个 盒子 紧 贴 第 一 个 盒子 ， 就 好 像 第 二 个 盒子 不 存在 一 样 。 | 














图 9.10 设置 第 二 盒子 绝对 定位 


现在 修改 上 述 代 码 ， 改 变 第 二 个 盒子 的 偏 移 位 置 ， 代 码 如 下 所 示 。 


#second { 
background-color:#CCF: 
border: 1px #0000A8 dashed: 
position:absolute; 
top:40px; 

Tight:40px; 

} | 

在 浏览 器 中 查看 页 面 效果 如 图 9.11 所 示 。 这 时 可 以 看 到 第 一 个 盒子 依然 以 浏览 器 窗口 | 

为 基准 ， 从 左上 角 开 始 向 下 和 向 左 各 移动 40px。 


a 
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会 = 图 911 设置 偏 和 
是 不 是 所 有 的 绝对 定位 都 以 浏览 器 窗口 为 基准 来 定位 呢 ? 当然 不 是 。 接 下 来 对 父 级 人 
| 子 father 的 代码 进行 修改 ， 增 加 一 个 定位 样式 ， 修 改 后 的 关键 代码 如 下 所 示 。 
| ather{ 






border:1px #666 solid: 
padding:Opx; 
position:relative; 


border: 1px #B55A00 dashed: 


background-color:#CCF:; 
border:1px #0000A8 dashed: 
position:absolute; 

top:40px; 

right:40px:; 


! 
! 
! 
! 
! 
| 
! .second { 
| 
| 
| 
| 


| } 


| 此 时 在 浏览 器 中 查看 页 面 效果 , 如 图 9.12 所 示 。 第 二 个 盒子 偏 移 的 距离 没有 发 生变 化 ， 
| 但 是 偏 移 的 基准 不 再 是 浏览 器 窗口 ， 而 是 它 的 父 级 盒子 father 了 。 





图 9.12 设置 父 元 素 定 位 


对 于 绝对 定位 可 以 得 出 如 下 结论 。 
(1) 使 用 了 绝对 定位 的 元 素 (第 二 个 盒子 以 它 最 近 的 一 个 “已 经 定位 ”的 “祖先 ” 

元 素 (father) 为 基准 进行 偏 移 。 如 果 没有 已 经 定位 的 祖先 元 素 ， 那 么 会 以 浏览 器 窗口 为 

| 基准 进行 定位 。 

| 2) 绝对 定位 的 元 素 (第 二 个 盒子 》 从 标准 文档 流 中 脱离 ， 这 意味 着 它们 对 其 他 元 

| 素 (第 一 个 、 第 三 个 盒子 ) 的 定位 不 会 造成 影响 。 

| 关于 上 述 第 一 条 结论 中 ， 有 两 个 带 引号 的 定语 ， 需 要 进行 一 些 解释 。 





| “已 经 定位 ”元 素 : position 属性 被 设置 ， 并 且 设 置 为 除 static 之 外 的 任意 一 种 方式 
| 那么 该 元 素 被 定义 为 “已 经 定位 ”的 元 素 。 

“祖先 ”元 素 : 就 是 从 文档 流 的 任意 节点 开始 ， 走 到 根 节 点 ， 经 过 的 所 有 节点 都 是 它 
| 的 祖先 ， 其 中 直接 上 级 节点 是 它 的 父 节点 ， 依 此 类 推 。 

回 到 这 个 实际 的 例子 中 , 在 父 级 <div> 没 有 设置 position 属性 时 , 第 二 个 盒子 的 所 有 “ 祖 
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先 ” 都 不 符合 “已 经 定位 ”的 要 求 ， 因 此 它 会 以 浏览 器 窗口 为 基准 来 定位 。 而 当 父 级 <div> 

将 position 属性 设置 为 relative 以 后 , 它 就 符合 “已 经 定位 ”的 要 求 了 ， | 

的 要 求 ， 因 此 就 会 以 它 为 基准 进行 定位 了 。 
对 于 绝对 定位 ， 还 有 一 个 特殊 的 性 质 需要 介绍 ， 那 就 是 仅 设置 元 素 的 绝对 定位 而 不 设 全 

置 偏 移 量 , 会 出 现 什 么 情况 呢 ? 下 面 就 修改 上 述 代 码 ， 仅 设置 第 二 个 


盒子 在 水 平方 向 上 的 | 
偏 移 量 ， 代 码 如 下 所 示 。 


.second { 
background-color:#CCF; 
border: 1px #0000A8 dashed: 
position:absolute; 
Tight:40px: 

lh 


在 浏览 器 中 查看 页 面 效 果 如 图 9.13 所 示 ， 由 于 没有 在 垂直 方向 上 设置 偏 移 量 , 因此 在 
垂直 方向 上 它 还 保持 在 原来 的 位 置 ， 仅 在 水 平方 向 上 向 左 偏 移 ， 距 离 父 级 右边 框 为 40px。 | 





图 9.13 仅 设置 水 平方 向 偏 移 


通过 上 述 的 演示 例子 可 以 得 出 一 个 结论 ， 如 果 设 置 了 绝对 定位 ， 而 没有 设置 偏 移 量 ， | 
。 它 将 保持 在 原来 的 位 置 。 这 个 性 质 在 网 页 制作 中 可 以 用 于 需要 使 某 个 元 素 脱离 标准 | 
， 而 仍然 希望 它 保持 在 原来 的 位 置 的 情况 。 | 


9.3 z-index 属性 


在 CSS 中 ，z-index 属性 用 于 调整 元 素 定位 时 重合 层 的 上 下 位 置 。z-index 是 针对 网 页 
显示 中 的 一 个 特殊 属性 。 因 为 显示 器 显示 的 图 案 是 一 个 二 维 平面 ,用 于 x 轴 和 y 轴 来 表示 
位 置 属性 。 为 了 表示 三 维 立 体 的 概念 如 显示 元 素 的 上 下 层 的 受 加 顺序 引入 了 z-index 属性 | 
来 表示 z 轴 的 区 别 。 表 示 一 个 元 素 在 又 加 顺序 上 的 上 下 立体 关系 。 | 

z-index 属性 在 立体 空间 中 表示 垂直 于 页 面 方向 的 z 轴 。z-index 属性 的 值 为 整数 ， 可 | | 
以 是 正 数 , 也 可 以 是 负数 。 z-index 属性 默认 值 为 0, z-index 值 大 的 层 位 于 其 值 小 的 层 上 方 ， 
如 图 9.14 所 示 。 当 两 个 层 的 z-index 值 一 样 时 ， 那 么 按 文档 流 顺序 ， 后 面 的 覆盖 前 面 的 。 

z-index 属性 适用 于 定位 元 素 (position 属性 值 为 relative 或 absolute 或 fixed 的 对 象 )， 
用 来 确定 定位 元 素 在 垂直 于 显示 屏 方向 〈 称 为 z 轴 ) 上 的 层 倒 顺序 ， 也 就 是 说 如 果 元 素 是 | 
没有 定位 的 ， 对 其 设置 的 z-index 是 无 效 的 。 
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层 合 的 元 素 
本 
vote 
革 
go 

上 2 > = 十 | 

条 

图 9.14 z-index 层 受 关系 示意 图 





| z-index 属性 在 网 页 中 也 是 比较 常用 的 ， 如 图 9.15 所 示 的 旅游 活动 页 面 中 图 片上 面 的 
| 半 透 明 层 和 文本 层 z-index 属性 。 
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图 9.15 汽车 活动 页 面 


”下 面 通过 制作 图 9.15 页 面 中 的 内 容 来 演示 z-index 的 应 用 。 首 先 把 所 有 内 容 放 在 一 个 
| class 为 wrpa 的 <div> 标 签 中 ,页 面 中 图 片 、 文 本 、 使 用 <img> 标 签 和 <p> 标 签 排版 ，HTML 
| 代码 如 示例 9.5 所 示 。 

示例 9.5: 











<!Doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 新 迈 尔 </title> 
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<link rel="stylesheet" href—"css/reset.css"> 
<link rel="stylesheet" hre 人 ="css/index.css"> 
</head> 
<body> 
<div class="wrap"> 
<img sre="img/carjpg"> 
<p>Jeep 全 新 指南 者 12 月 上 市 </p> 
<div class="bg"></div> 
</div> 
</body> 
</html> 


代码 中 p 标签 背景 色 用 来 创建 半 透 明 层 , 在 CSS 中 有 两 种 方式 设置 元 素 的 透明 度 , 具 


体 方法 如 表 9.1 所 示 。 
表 9.1 设置 层 的 透明 度 
说 了 明 
x 值 为 0 一 1， 值 越 小 越 透明 ity:0.4: 
X 值 为 0 一 100， 值 越 小 越 透明 filter:alpha(opacity=40); 





由 于 这 两 种 方法 在 使 用 中 存在 浏览 器 兼容 的 问题 ， 下 9、Firefox、Chrome、Opera 和 
Safari 使 用 属性 opacity 来 设 定 透 明度 , IE 8.0 及 更 早 的 版 本 使 用 滤 镜 filter:alpha(opacity=x) | 
来 设 定 透明 度 。 但 是 在 实际 网 页 制作 中 ， 并 不 能 确定 用 户 的 浏览 器 , 因此 在 使 用 CSS 设 定 | 


元 素 的 透明 度 时 ， 通 常 在 样式 表 中 同时 设置 这 两 种 方法 ， 以 适应 所 有 的 浏览 器 。 





学 习 了 创建 网 页 元 素 透明 度 的 设置 方法 , 现在 开始 编写 CSS 排版 、 美 化 页 面 ， 需 要 设 


置 如 下 几 个 方面 的 样式 。 
(1) 设置 外 层 wrap 的 宽度 、 定 位 方式 。 


(2) 由 于 文本 层 和 半 透 明 在 图 片 的 上 方 ， 所 以 需要 设置 它们 的 定位 方式 ， 以 及 透明 


层 的 透明 度 。 设 置 完成 后 的 CSS 代码 如 下 所 示 。 


.wrap{ 
margin: 0 auto; 
width:630px: 
position: relative; 
height: 420px; 

} 

-wrap .bg{ 
width: 100%%; 
height: 50px; 
background: #000; 
opacity: 0.3: 
filter:alpha(opacity=30): 
Position: absolute; 
left: 0; 
bottom: 0; 

} 

-wrap p{ 


a 
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position: absolute: 

bottom: 0; 

color: #FFF: 

line-height: 50px; 


食 憩 | width: 100%%; 


text-align:center; 


MNote | font-size: 22px; 
在 浏览 器 中 查看 页 面 效 果 ， 如 图 9.16 所 示 ， 图 片上 方 的 文本 显示 得 非常 不 清楚 ,为 什 
么 会 这 样 呢 ? 





图 9.16 没有 设置 z-index 属性 


| 现在 再 回头 看 一 下 HTML 代码 , 透明 层 <div> 在 文本 层 <p> 的 后 面 编写 , 文本 层 和 透明 
| 层 都 设置 了 绝对 定位 ， 而 且 都 没有 设置 z-index 属性 ， 它 们 默认 的 值 都 为 0。 根据 当 两 个 层 
| 的 z-index 值 一 样 时 ， 将 保持 原 有 的 高 低 覆 盖 关 系 ， 因 此 透明 层 覆 盖 到 了 文本 层 的 上 方 。 
| 现在 不 改变 HTML 代码 ， 仅 通过 CSS 设置 文本 层 到 透明 层 的 上 方 ， 这 就 需要 设置 
| z-index 属性 了 ， 现 在 修改 文本 层 样 式 ， 增 加 z-index 属性 ， 代 码 如 下 所 示 。 
| -wrap p{ 

position: absolute; 

bottom: 0; 

color: #FFF: 

line-height: 50px: 

width: 100%:; 

text-align:center; 

font-size: 22px:; 

z-index:1; 

} 
在 浏览 器 中 查看 页 面 效 果 如 图 9.17 所 示 ， 文 本 清晰 地 显示 在 透明 层 的 上 方 了 。 

| 此 可 以 知道 , 网 页 中 的 元 素 都 含有 两 个 堆 秋 层级, 一 个 是 未 设置 绝对 定位 时 所 处 的 环 
| 境 ， 这 时 所 有 层 的 z-index 属性 值 总 是 0， 如 同 页 面 中 的 图 片 层 、 下 方 文本 层 ， 另 一 个 是 设 
| 置 绝对 定位 时 所 处 的 堆 秋 环境， 这 个 环境 所 处 的 位 置 由 z-index 属性 来 指定 ， 如 同 页 面 中 的 
| 透明 层 和 其 上 方 的 文本 层 ，z-index 值 大 的 层 履 盖 值 小 的 层 。 如 果 需 要 设置 了 绝对 定位 的 层 
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在 没有 设置 绝对 定位 的 层 下 方 ， 只 需要 设置 绝对 定位 的 层 的 属性 z-index 值 为 负 值 即 可 。 


iM 党 
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图 9.17 设置 z-index 属性 
94 技能 训练 


1. 制作 易 镁 商城 导航 下 拉 菜 单 

需求 说 明 : 

根据 提供 的 网 页 素材 制作 如 图 9.18 所 示 的 易 美 科技 导航 下 拉 列 表 ， 要 求 如 下 。 
(1) 在 提供 的 网 页 的 基础 上 添加 或 修改 CSS 样式 ， 实 现下 拉 列 表 导 航 菜 单 。 


(2) 当 鼠 标 放 到 一 级 菜单 上 时 ， 显 示 对 应 的 二 级 菜单 ， 当 鼠标 离开 一 级 菜单 或 对 应 


的 二 级 菜单 时 ， 下 拉 列 表 消 失 。 





(3) 使 用 相对 定位 与 绝对 定位 相 结 合 的 方法 实现 下 拉 菜 单 ， 二 级 菜单 紧 贴 着 对 应 的 


一 级 菜单 下 方 ， 并 且 二 级 菜单 与 对 应 一 级 菜单 的 背景 图 片 左 侧 对 齐 。 





Ea sass 并 sm Russe, spo :400-678-0068 


ii 最 镁 商城 。 CEEss 出 昌 
EMGSHOP. COM 回 


图 9.18 易 镁 商城 





2. 制作 当当 图 书 榜 页 面 
需求 说 明 : 
制作 如 图 9.19 所 示 的 当当 网 图 书 榜 页 面 ， 要 求 如 下 。 
(1) 页 面 右上 角 “3 折 疯 抢 ” 图 片 使 用 定位 方式 实现 。 
(2) 页 面 导航 菜单 字体 颜色 为 白色 ， 鼠 标 移 至 菜单 上 时 出 现下 划 线 。 
(3) 页 面 中 的 英文 字体 为 Verdana， 中 文字 体 为 宋体 ， 字 体 大 小 为 12px。 
(4)“ 图 书 畅销 榜 ” 图 片 使 用 position 定位 方式 实现 ， 并 且 图 书 列表 中 的 “1”、“2” 
和 “3” 数 字 图 片 均 使 用 position 定位 方式 实现 。 
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从 影子 的 人 

作者 : 法 ] 3 训 李 维 (Marc Levy) 著 , 段 的 录 译 
出 版 社 : 湖南 文艺 出 版 社 

当当 价 : ¥ 17.90 作者 : 站 著 

不 江 姓 开 的 训话 儿 。 这 训 是 你 在 我 生命 里 的 角色 出 后 社 : 广西 总 大 学 出 二 社 
我 便 年 时 的 小 女孩 ， 今 日 晤 灾 成 了 女人 ， 一 段 青梅 竹 ¥2940 7.4¥i 

的 回忆 ， 一 个 时 间 之 神 及 有 应 亿 的 原 望 。 一 个 老 是 改变 孩 了 先 改变 自己 

，。 。 受 星 上 同学 数 负 的 讼 到 小 男 按 ， 因 为 拥有 一 种 桂 下 能 WA 亿 总 作者 : 机 容 姑 要 睦 若 

力 而 强大 : 他 能 " 偷 别 人 的 影子 "， 因 而 能 看 见 他 | 出 版 社 : 作家 出 版 社 


和 ¥22.20 7.4 折 


看 见 (央视 知名 记者 、 主 持 人 柴 静 : 十 年 个 人 
成 长 的 可 白 ， 中 国 社会 变迁 的 备 忘 





图 9.19 当当 图 书 榜 
3. 制作 带 按钮 的 广告 效果 图 
需求 说 明 : 
制作 如 图 9.20 所 示 的 带 按钮 的 图 片 横幅 广告 页 面 ， 要 求 如 下 。 
(1) 使 用 background-color 属性 设置 下 面 按钮 背景 颜色 为 绿色 。 
(2) 使 用 background 属性 设置 左右 按钮 背景 色 为 黑色 半 透 明 。 


(3) 使 用 border 属性 设置 数字 按钮 边框 样式 为 1px 的 灰色 实 线 。 
(4) 使 用 无 序列 表 排版 下 面 按钮 。 


年 三 合作 至 1 5 元 


， 新 衣 早 准 备 远离 快递 爆 仓 SS 


| 


图 9.20 带 按钮 的 广告 效果 图 
4. 制作 960 商城 -商品 筛选 页 
需求 说 明 : 
制作 如 图 9.21 所 示 的 960 商城 -商品 筛选 页 面 ， 要 求 如 下 。 
(1) 使 用 定位 布局 “ 疯 抢 六 “ 满 减 和 “热卖 ”和 “特卖 ”4 个 热 标的 位 置 。 
(2) 使 用 background 设置 购物 车 图 标 。 
(3) 使 用 浮动 完成 页 面 布局 。 
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9.21 960 商城 -商品 筛选 页 


本 章 总 


使 用 position 属性 定位 页 面 元 素 。 

position 属性 值 有 static、relative、absolute 和 fixed， 其 中 relative 和 absolute 丙种 
定位 方式 是 网 页 制作 中 经 常 使 用 的 。 

使 用 z-index 属性 控制 定位 元 素 的 堆肥 顺序 。 
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第 |/ 总 
项 目 案例 


本 章 简介 


到 本 章 为 止 ， 这 门 课程 已 接近 尾声 。 通 过 前 面 章节 的 学 习 和 技能 训练 ， 相 信 你 已 经 可 
以 游刃有余 地 使 用 DIV+CSS 布局 并 制作 较为 复杂 的 网 页 了 。 

为 了 能 够 更 好 地 练习 使 用 CSS 布局 、 美 化 网 页 ， 熟 练 、 快 速 地 制作 网 页 ， 本 章 将 学 习 
制作 易 镁 商城 网 站 ， 综 合 运 用 学 习 过 的 知识 ， 巩 固 使 用 HTML 编辑 网 页 ， 使 用 CSS 布局 
并 美化 网 页 ， 牢 固 掌握 学 习 过 的 知识 和 技能 点 。 


本 章 工作 任务 | 
> 制作 易 镁 商城 网 站 页 面 


本 章 技能 目标 | 


使 用 float 属性 进行 多 列 的 网 页 布局 
使 用 position 属性 定位 网 页 元 素 

使 用 字体 样式 和 文本 样式 排版 网 页 文本 
使 用 背景 属性 设置 网 页 元 素 的 背景 
使 用 盒子 模型 属性 设置 网 页 元 素 

使 用 无 序列 表 制 作 导 航 、 列 表 信息 

制作 语义 化 的 表单 


预习 并 回答 以 下 问题 


1. 如 何 使 用 <div> 标 签 与 float 属性 相 结合 的 方式 创建 横向 多 列 布局 ? 


Vvvyvyvyvyv 





Eee 精通 +CSS 网 页 开发 与 制作 
2. 如 何 使 用 无 序列 表 制 作 横向 导航 菜单 ? 

3. 如 何 使 用 自 定 义 列 表 制 作 图 文 混 排 的 商品 列表 ? 

4. 如 何 制作 语义 化 的 表单 ? 


10.1 案例 分 析 





易 镁 商城 是 电子 商务 类 网 站 。 说 到 电子 商务 网 站 ， 大 家 都 是 非常 熟悉 的 ， 就 是 可 以 进 
了 商品 展示 、 会 员 注册 、 登 录 、 在 线 购买 商品 的 网 站 。 那 么 本 章 就 在 易 镁 商城 网 站 的 基础 
上 ， 挑 选 部 分 页 面 供 大 家 练习 。 


“10.1.1 需求 描述 


| 在 易 镁 商城 网 站 中 ， 除 了 包含 镁 质 矿物 原材料 、 金 属 镁 与 镁 合金 等 商品 类 栏目 外 ， 还 
| 有 一 些 服务 性 页 面 ， 如 服务 、 登 录 、 注 册页 面 。 本 次 要 制作 的 页 面包 括 首页 、 产 品 页 、 样 
| 品 页 、 品 牌 页 、 方 案 页 以 及 服务 、 登 录 和 注册 页 面 ， 图 10.1 一 图 10.8 是 项 目 案例 的 页 面 效 
果 图 。 
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10.1.2 开发 环境 


开发 工具 : WebStorm 11.0.3。 





关 寺 2 

10.1.3 ”覆盖 技能 点 

| 会 使 用 HTML 代码 编辑 网 页 。 
会 制作 语义 化 的 表单 。 
会 使 用 字体 样式 和 文本 样式 美化 网 页 文本 。 
会 使 用 font-size 属性 设置 字体 大 小 。 
会 使 用 font-family 属性 设置 字体 类 型 。 
会 使 用 font-style 属性 设置 字体 风格 。 
会 使 用 font-weight 属性 控制 文字 粗细 。 
会 使 用 color 属性 设置 文本 颜色 。 
会 使 用 text-align 和 vertical-align 属性 设置 网 页 元 素 对 齐 方 式 。 
会 使 用 text-indent 和 line-height 属性 设置 段落 首 行 缩 进 和 行 高 。 
会 使 用 text-decoration 设置 文本 的 装饰 效果 。 
会 使 用 CSS 设置 超 链接 样式 。 
会 使 用 背景 属性 设置 网 页 元 素 的 背景 。 
会 使 用 background-color 属性 设置 网 页 元 素 的 背景 颜色 。 
会 使 用 background-image 属性 设置 网 页 元 素 的 背景 图 像 。 
会 使 用 background-repeat 和 background-image 控制 背景 图 像 的 重复 和 位 置 。 
会 使 用 background 属性 统一 设置 网 页 元 素 的 背景 颜色 、 背 景 图 像 ， 以 及 设置 背景 
图 像 的 重复 方式 和 位 置 。 
会 使 用 盒子 模型 属性 美化 网 页 元 素 。 
会 使 用 border 属性 设置 网 页 元 素 的 边框 样式 。 
会 使 用 padding 属性 设置 网 页 元 素 的 内 边 距 。 
会 使 用 margin 属性 设置 网 页 元 素 的 外 边 距 。 
会 计算 盒子 模型 尺寸 。 
会 使 用 margin 属性 设置 盒子 元 素 居中 对 齐 。 
会 使 用 浮动 布局 并 排版 网 页 内 容 。 
会 使 用 float 属性 布局 网 页 。 
会 使 用 float 属性 与 列表 结合 制作 横向 导航 菜单 。 
会 使 用 clear 属性 清除 浮动 及 扩展 盒子 高 度 。 
会 使 用 overflow 属性 处 理 溢出 和 扩展 盒子 高 度 。 
会 使 用 position 属性 定位 网 页 元 素 。 
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10.1.4 问题 分 析 


从 图 10.1 一 图 10.8 可 以 看 到 , 易 镁 商城 网 站 是 一 个 企业 对 个 人 的 电子 商务 网 站 。 需 要 


制作 的 是 它 的 首页 、 产 品 、 样 品 、 品 牌 、 方 案 、 服 务 、 登 录 与 注册 页 ， 一 共 8 个 页 面 。 


从 这 些 页 面 的 效果 图 可 以 看 到 ， 这 几 个 页 面 有 一 个 共同 点 ， 那 就 是 网 页 顶部 导航 和 网 | 


页 底部 的 网 站 版 权 是 一 样 的， 都 可 以 看 作 上 中 下 结构 。 也 就 是 说 ， 最 上 方 都 是 网 站 导航 ; 


中 间 部 分 是 网 页 主体 显示 内 容 ， 每 个 页 面 的 主体 内 容 都 不 一 样 ; 最 下 方 都 是 网 站 版 权 相 关 | 
信息 。 因 此 ， 可 以 先 制作 网 站 的 导航 和 版 权 部 分 ， 这 样 在 制作 其 他 页 面 时 ， 可 以 直接 使 用 | 





已 经 制作 完成 的 导航 和 版 权 部 分 即 可 。 
1. 网 站 结构 


开发 一 个 网 站 ， 网 站 中 的 文件 结构 是 否 合理 是 非常 重要 的 ， 因 此 在 网 页 制作 前 需要 设 


置 网 站 文件 的 结构 。 通 常 开发 一 个 网 页 需要 一 个 总 的 目录 结构 。 例 如 , 本 网 站 起 名 yimei-sc， 


CSS 样式 表 文 件 通常 放 在 CSS 文件 夹 中 ， 网 页 中 用 到 的 图 片 通常 放 在 image 或 images 文 


件 夹 中 。 
2. 使 用 无 序列 表 布局 网 页 的 局 部 结构 


使 用 ulli 布局 网 页 的 局 部 结构 是 网 站 中 经 常用 到 的 一 种 方式 ， 通 常用 于 导航 菜单 、 列 


表 等 。 如 图 10.9 所 示 页 面 右上 方 的 顶部 导航 及 网 站 主导 航 菜单 都 是 使 用 无 序列 表 排 版 的 。 
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图 10.9 网 站 导航 


使 用 无 序列 表 排 版 主导 航 菜单 ，HTML 代码 非常 简洁 ， 如 下 所 示 。 


<div class="nav-right fr"> 
<div class="nav-sub fl"> 
<ul class="clearfix"> 
<li><a class="active" hre 仁 "index.html"> 首 页 </a></li> 
<li><a hre 全 "product-list1.html"> 产 品 </a></li> 
<li><a hre 仁 "yangpin.html"> 样 品 </a></li> 
<li><a hre 伍 "brand.html"> 品 牌 </a></li> 
<li><a hre 仁 "fangan.html"> 方 案 </a></li> 
<li><a hre 全 "fuwu.html"> 服 务 </a></li> 
</ul> 
</div> 
<div class="caigou fr"><a hre 人 ="#"><i class="fa fa-clipboard"></i> 采 购 单 (0) </a></div> 
</div> 


使 用 CSS 设置 主导 航 菜单 ， 首 先 使 用 float 属性 设置 列表 项 左 浮动 。 


A 
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3. 使 用 dl-dt-dd 布局 网 页 的 局 部 结构 
| 使 用 dl-dt-dd 布局 网 页 的 局 部 结构 是 网 站 中 经 常用 到 的 一 种 页 面 布局 方式 ， 通 常用 于 
p | 图 文 混 排 或 标题 与 解释 性 内 容 相 混 排 的 情况 ， 如 图 10.10 所 示 的 首页 左 侧 的 导航 菜单 就 可 
铬 | ， 用 这 种 方式 实现 。 








镁 质 矿物 原材料 
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图 10.10 左 侧 菜单 


| 首页 左 侧 菜单 是 一 个 二 级 导航 菜单 ， 都 是 一 个 大 的 一 级 菜单 下 有 二 级 菜单 ， 二 级 菜单 
| 向 内 缩 进 ， 因 此 可 以 把 一 级 导航 菜单 放 在 <dt> 标 签 中 ， 把 二 级 导航 菜单 放 在 <dd> 标 签 中 。 
| HTML 关键 代码 如 下 所 示 。 
| <h3> 
<dl class="clearfix"> 
<dt><a hre 伍 "#"> 镁 质 矿石 </a></dt> 
<dd><a hre 仁 "#"> 姜 镁 矿石 </a></dd> 
<dd><a hre 伍 "#"> 白 云 石 <a></dd> 





</dl> 

</h3> 

<div class="item"> 

<h3> 
<dl class="clearfix"> 

<dt><a href="#"> 轻 烧 镁 </a></dt> 
<dd><a href="#"> 轻 烧 镁 粉 </a></dd> 
<dd><a href="#"> 轻 烧 镁 球 </a></dd> 


-VB 
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<dd><a href="#'> 轻 烧 镁 粒 </a></dd> | 
</d> 
</h3> 
</div> 
<div class="item"> 
<h3> 
<dl class="clearfix"> 
<dt><a hre 人 ="#"> 烧 结 镁 砂 </a></dt> | 
<dd><a hre 人 ="#"> 重 烧 镁 砂 </a></dd> | 
<dd><a href="#"> 中 档 镁 砂 </a></dd> | 
<dd><a hre 全 "> 高 纯 镁 砂 </a></dd> 
</d> 
</h3> 
</div> 


关键 的 CSS 代码 如 下 所 示 。 


.item h3 dd{ 
line-height: 24px; | 
height: 24px; | 
overflow: hidden: | 
font-size: 12px; 
margin: 0; 
padding: 0; 
float: left: 
width: 48%; 
padding-right: 2%; 





} 
-item h3 dt{ 
font-size: 14px;: 
line-height: 24px: 
} 
-item h3{ 
line-height: 35px; 
border-bottom: 1px solid #DOEOF!1:; 
padding: 1px 10px: 
margin: 0; | 
font-size: 14px; | 
font-weight: normal; | 
width: 1S6px: | 
overflow: hidden: | 
; 
4. 制作 语义 化 表单 
制作 语义 化 表单 是 一 个 非常 好 的 编写 HTML 代码 的 习惯 , 它 便于 后 期 的 维护 和 搜索 引 
擎 搜索 。 例 如 ， 用 户 登录 部 分 就 使 用 了 语义 化 的 表单 ， 关 键 代 码 如 下 所 示 。 | 





A 
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<div class="login-layer fr"> 
<h2> 登 录 易 镁 商城 </h2> 
<div class="form-item"> 
<input name="" type="text" value=" 手 机 号 /邮箱 /用 户 名 " onclick="this.value=";focusO"/> 


全 J | <input type="password" placeholder=" 密 码 " onclick="this.placeholder=";focus(0"/> 
Sa </div> 
Jote <div class="form-other clearfix"> 
| <div class="fl"> 
<input name="" type="checkbox" value="" /> 
自动 登录 
</div> 
<div class="fr"><a class="blue" hre 全 "> 忘记 密码 ? </a></div> 
</div> 


<div class="login-btn"><a hre 伟 "#'> 登 &nbsp:&nbsp: 录 </a></div> 
| <div class="login-foot"> 合 作 账号 登录 : <a class="xinlang”hre 伍 "#"> 新 浪 微 博 </a><a class="qq" 
| href="#"> 腾 讯 QQ</a> 
| <p> 还 不 是 易 镁 会 员 ? <a class="blue" hre 人 "registerhtml"> 立 即 注册 </a></p> 
</div> 
</div> 


5. 页 面 居 中 显示 


页 面 居中 对 齐 是 网 页 制作 中 经 常用 到 的 一 个 功能 。 例 如 ， 本 网 站 各 个 页 面 内 容 均 放 在 
| 一 个 id 为 wrap 的 <div> 中 ， 需 要 设置 其 居中 显示 ， 代 码 如 下 所 示 。 








-content{ 
margin:0 auto; 
padding:0; 
width:1190px; 
} 


10.2 项 目 需 求 


| 根据 以 上 的 分 析 ， 想 必 大 家 已 经 知道 如 何 整体 布局 网 页 、 如 何 布局 页 面 中 的 局 部 内 容 
| 了 。 下 面 就 依次 制作 网 页 ， 首 先 制作 网 页 的 公用 部 分 ， 即 网 站 的 导航 和 版 权 部 分 。 


10.2.1 制作 网 站 公用 部 分 





| 网 站 导航 和 版 权 部 分 对 任何 一 个 网 站 都 是 必 不 可 少 的 。 网 站 导航 对 整个 网 站 有 着 
| 提纲 的 作用 ， 为 了 方便 用 户 在 复杂 的 网 站 页 面 之 间 跳 转 ， 版 权 部 分 通常 是 一 些 网 站 备 
| 案 信息 及 一 些 页 面 中 公用 部 分 的 内 容 。 易 镁 商城 网 站 的 导航 和 版 权 部 分 的 页 面 效果 如 
| 图 10.11 所 示 。 
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图 10.11 网 站 公用 部 分 (导航 和 版 权 部 分 》 


(1) 页 面 最 顶部 是 项 部 导航 、 网 站 LOGO、 主 导航 和 商品 分 类 。 使 用 无 序列 表 制 作 | 
顶部 导航 和 主导 航 菜单 ， 使 用 文字 、 文 本 、 背 景 、 浮 动 等 属性 定位 、 美 化 网 页 元 素 。 | 
(2) 主导 航 菜单 包括 首页 、 产 品 、 样 品 、 品 牌 、 方 案 和 服务 等 内 容 。 
(3) 由 于 网 站 信息 量 非常 大 ， 为 了 提高 用 户 体验 ， 网 站 还 在 主导 航 菜单 下 部 增加 了 
商品 分 类 导航 。 
(4) 网 站 版 权 部 分 包括 服务 导航 及 版 权 信息 等 内 容 ， 使 用 自 定义 列表 制作 网 站 版 权 | 
部 分 的 服务 导航 内 容 。 | 
(5) 主导 航 菜单 超 链接 文本 颜色 为 白色 ， 当 鼠标 移 至 超 链接 上 时 背景 颜色 变 为 | 





绿色 。 
思路 分 析 : 


(1) 使 用 float 属性 结合 自 定义 列表 制作 如 图 10.12 所 示 的 服务 导航 信息 ， 每 列 的 信 
息 放 在 <l 记 标签 中 ， 关 键 代码 如 下 所 示 。 | 


<ul class="mod agree_con clearfix"> 
<li class="mod agree item mod agree item]1"> 
<P></D> 
<a href="#"> 
<strong> 正 品 保障 </strong> 
<span> 全 场 正品 ， 行 货 保障 </span> 
</a> 
</> 
<li class="mod agree item mod agree item2"> 
<></> 
<a href="#"> 
<strong> 新 手指 南 </strong> 


sal 
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<span> 快 速 登录 ， 无 须 注册 </span> 
</a> 
< 中 > 
<li class="mod agree item mod agree_ item3"> 
<i></> 
<a href="#"> 
<strong> 货 到 付款 </strong> 
<span> 货 到 付款 ， 安 心 便捷 </span> 
</a> 
</> 
<li class="mod agree item mod agree item4"> 
<i></> 
<a href="#"> 
<strong> 维 修 保障 </strong> 
<span> 服 务 保 证 ， 全 国联 保 </span> 
</a> 
</> 
<li class="mod agree item mod agree item5"> 
<i></i> 
<a href="#"> 
<strong> 无 忧 退货 </strong> 
<span> 无 忧 退货 ，7 日 尊 享 </span> 
</a> 
< 由 > 
<li class="mod agree item mod agree item6"> 
<i></> 
<a href="#"> 
<strong> 会 员 权益 </strong> 
<span> 会 员 升 级 ， 尊 贵 特权 </span> 





图 10.12 服务 导航 信息 
(2) 网 站 导航 和 版 权 制 作 完 成 后 ， 保 存 网 页 。 为 了 之 后 几 个 页 面 可 使 用 此 导航 和 版 




















| 权 部 分 ， 可 将 此 网 页 保存 多 个 ， 分 别 命名 为 index.html、product- listl .html、yangpin.html、 
| brand html、fangan html 和 fuwu html， 制 作 其 他 页 面 时 直接 在 此 基础 上 制作 即 可 。 
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10.2.2 ”制作 网 站 首页 


首页 是 任何 一 个 网 站 的 主要 页 面 ， 易 镁 商城 网 站 主页 中 的 主体 内 容 如 图 10.13 所 示 。 | 
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图 10.13 易 镁 商城 首页 主体 内 容 
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(1) 网 页 主体 内 容 最 上 方 是 一 个 banner，banner 下 方 是 图 片 广告 和 市 场 资讯 ， 使 











| 标题 标签 和 无 序列 表 排版 市 场 资讯 内 容 。 


性 等 美化 、 定 义 金属 匀 内 容 。 


float 属性 、 定 位 属性 、 背 景 属性 等 美化 模块 。 


(2) 使 用 <div> 标 签 排版 金属 镁 模块 ， 使 用 float 属性 、 背 景 属性 、 字 体 属 性 、 文 本 属 














(3) 使 用 <div> 标 签 、 字 体 标签 和 超 链接 等 编写 镁 合金 镁 质 矿物 原材料 等 模块 ， 使 用 





(4) 使 用 表单 以 及 表格 实现 “委托 找 贷 ” “价格 行 情 ” 和 商品 信息 列表 。 

思路 分 析 : 

(1) 由 易 镁 商城 首页 主体 内 容 效果 图 可 以 看 到 , 主体 内 容 由 5 个 部 分 组 成 , 即 banner、 
金属 镁 、 匀 合金、 委托 找 贷 与 商城 故事 ， 这 几 个 模块 使 用 <div> 布 局 为 横向 单列 布局 。 

(2) banner 分 为 左 侧 菜单 和 右 侧 内 容 部 分 ， 分 别 使 用 两 个 <div> 横 向 布局 ， 右 侧 内 容 
部 分 分 为 上 下 两 部 分 ， 使 用 <div> 纵 向 布局 。 

(3) 其 他 模块 都 是 分 为 左右 布局 ， 使 用 <div> 横 向 布局 即 可 。 


10.2.3 制作 产品 首页 


产品 页 是 为 了 更 好 地 展示 易 镁 商城 而 做 的 页 面 ， 产 品 首页 的 主体 内 容 如 图 10.14 
所 示 。 














和 














图 10.14 产品 主体 内 容 


(1) 网 页 主体 最 上 方 是 商品 总 量 、 交 易 金 额 。 
(2) 产品 首页 左 侧 内 容 是 产品 信息 。 使 用 自 定义 列表 制作 信息 列表 ， 使 用 <div> 和 


| atoat 属性 等 方式 实现 。 


(3) 页 面 右 侧 是 掌柜 热卖 产品 展示 。 


。184 。 
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10.2.4 制作 样品 首页 


样品 页 是 给 顾客 展示 最 新 产 
如 图 10.15 所 示 。 
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思路 分 析 : 
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图 10.15 样品 主体 内 容 
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品 的 页 面 ， 样 品 首页 的 主题 内 容 分 为 左右 两 大 模块 ， 


左右 两 模块 可 以 使 用 <div> 添 加 float 属性 布局 ， 左 侧 有 菜单 、 热 卖 产 品 和 一 周 销量 排 | 
行 ;热卖 产品 是 图 文 混 排 ， 可 以 用 <dL > 列表 实现 ， 图 片 放 在 <dP> 标 签 内 ， 文 字 放 在 <dd> 标 ke 
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签 内 ; 一 周 销量 排行 用 标题 标签 ， 销 量 内 容 可 以 用 无 序列 表 <ul><li> 标 签 。 前 面 的 数字 用 
<span> 标 签 ， 示 例 代码 如 下 。 
<ul> 
<li><a hre 仁 "><span>1</span> 和 村 达 HPB235 工业 高 线 </a></li> 
<li><a hre 伍 "><span>2</span> 企 业 集 采 专 业 供应 镀 锌 管 </a></li> 
<li><a hre 仁 "><span>3</span> 夺 达 HPB235 工业 高 线 </a></li> 
<li><a hre 仁 ""><span>4</span> 企 业 集 采 专 业 供应 镀 锌 管 </a></li> 
<li><a hre 伍 ""><span>5</span> 先 达 HPB235 工业 高 线 </a></li> 
</ul> 


10.2.5 制作 品牌 首页 


品牌 页 面 是 更 好 地 展现 商城 产品 的 品牌 效果 ， 品 牌 首页 的 主题 内 容 分 为 上 下 结构 ， 页 
面 效 果 如 图 10.16 所 示 。 
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图 10.16 品牌 主体 内 容 
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品牌 页 面 内 容 比较 单一 ， 页 面 主体 内 容 上 方 是 品牌 搜索 ， 下 面 是 各 个 地 
牌 。 主 要 以 图 片 为 主 。 





10.2.6 ”制作 方案 首页 


方案 页 面 是 给 客户 提供 更 优质 的 选择 ， 针 对 不 同 的 行业 选择 不 同 的 材料 。 方 案 首页 的 
主体 内 容 如 图 10.17 所 示 。 
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图 10.17 方案 主体 内 容 
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思路 分 析 : 


Note 





| 充 内 


再 使 


(1) 主体 内 容 分 为 左右 两 部 分 ， 使 用 两 个 <div> 配 合 float 属性 来 完成 。 

(2) 左边 方案 可 以 使 用 列表 ， 每 一 条 方案 放 在 一 个 <1i> 标 签 中 ， 然 后 用 标签 的 嵌 套 填 
容 ， 使 用 <img> 标 签 、<h> 标 签 和 <p> 标 签 等 。 

(3) 右边 的 方案 查询 即 是 一 个 表单 结构 ， 产 品 导航 用 标题 标签 和 列表 即 可 ， 最 后 
用 CSS 美化 页 面 。 


| 10.2.7 ”制作 服务 首页 
服务 页 面 是 展现 商城 可 以 为 顾客 提供 哪些 优良 的 服务 .服务 页 面 的 主体 内 容 如 图 10.18 


所 示 。 
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10.18 ”服务 主体 内 容 
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思路 分 析 : 
这 个 页 面 比较 简单 ， 主 要 以 图 片 和 背景 为 主 ， 媒 体 报道 部 分 以 文字 <p> 为 主 ， 使 用 | 
background 添加 样式 美化 页 面 即 可 。 | a 
10.2.8 ”制作 登录 和 注册 页 面 A 
Note 


























于 











易 镁 商城 网 站 的 登录 与 注册 页 主要 有 两 部 分 内 容 , 分 别 是 登录 部 分 、 注 册 新 用 户 部 分 ， 
页 面 完 成 效果 如 图 10.19 和 图 10.20 所 示 。 


(1) 使 用 语义 化 表单 制作 登录 和 注册 内 容 。 
(2) 登录 和 注册 部 分 的 用 户 输入 框 的 边框 样式 为 1px 灰色 实 线 。 
(3) 登录 和 注册 提交 按钮 的 背景 图 像 均 使 用 背景 属性 实现 。 


pr mre: 400-678-0068 
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图 10.19 登录 页 面 
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图 10.20 注册 页 面 
思路 分 析 : 
(1) 由 登录 与 注册 页 面 效 果 图 可 以 看 到 ， 页 面 由 两 部 分 组 成 ， 即 网 站 上 方 的 登录 与 
主 册 部 分 。 
(2) 输入 框 的 边框 样式 使 用 盒子 模型 属性 border 来 设置 边框 的 宽度 、 样 式 和 颜色 。 
(3) 按钮 的 背景 图 像 使 用 背景 图 像 属性 设置 背景 样式 即 可 。 





10.3 技能 训练 


1. 根据 项 目 需 求 和 提供 的 素材 ， 检 查 并 完成 本 项 目 案例 中 的 各 个 网 页 。 
2. 总 结 项 目 完成 情况 ， 记 录 项 目 开 发 过 程 中 的 得 失 ， 提 升 技术 能 
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版 权 上 声明 


为 了 促进 职业 教育 发 展 、 知 识 传播 、 学 习 优秀 作品 ， 作 者 在 本 书 中 选用 了 一 些 知名 网 
站 、 企 业 的 相关 内 容 ， 包 括 网 站 内 容 、 企 业 LOGO、 宣 传 图 片 、 网 站 设计 等 。 为 了 尊重 这 
些 内 容 所 有 者 的 权利 ， 特 此 声明 : 

1. 凡 在 本 资料 中 涉及 的 版 权 、 著 作 权 、 商 标 权 等 权益 ， 均 属于 原作 品 版 权 人 、 著 作 权 
人 、 商 标 权 人 所 有 。 

2. 为 了 维护 原作 品 相关 权益 人 的 权利 , 现 对 本 书 中 选用 的 资料 出 处 给 予 说 明 (排名 不 
分 先后 )。 















































序 号 选用 网 站 、 作 品 、LOGO 版 权 归 属 
1 百度 首页 百度 公司 
2 去 哪 网 去 哪 网 
3 淘宝 网 阿里 集团 
4 英雄 美人 杭州 润 趣 科技 有 限 公司 
5 李 元 德国 画 网 浙江 中 收 网 络 科技 有 限 公司 
6 易 镁 商城 易 镁 电子 商务 有 限 公 司 
7 人 人 网 人 人 公司 
8 LE 品 会 广州 唯 品 会 信息 科技 有 限 公 司 
9 阿 芮 官网 梦想 城堡 天津， 电子 商务 有 限 公 司 
10 12306 官网 中 国 铁路 信息 技术 中 心 
11 中 国 工商 银行 官网 中 国 工商 银行 
12 亚马逊 购物 网 站 亚马逊 公司 或 其 关联 公司 
13 易 车 网 北京 易 车 信息 科技 有 限 公司 
14 当当 网 当当 网 


由 于 篇 幅 有 限 ， 以 上 列表 中 无 法 全 部 列 出 所 选 资料 的 出 处 ， 请 见谅 。 在 此 ， 囊 心 感谢 
所 有 原作 品 的 相关 版 权 权 益 人 及 所 属 公司 对 职业 教育 的 大 力 支持 ! 


